ウェブサイトで使う

ホームページやオンラインポートフォリオなどのウェブサイトやウェブアプリに設置できます。

ユーザーインタフェース（UI）アイコンとして利用するときはSVGが最適です。

動画や画像編集ソフトで使用したい場合は編集アプリやソフトで使うをご確認ください。

SVG（インライン）の場合

古いインターネットブラウザ（Internet Explorerなど）では正しく表示されないことがあります。

HTMLファイルなどに直接記述します。

インラインの場合は、あとからCSSやJavaScriptを用いて様々なカスタマイズが可能です。

保存したSVGファイルの内容を、設置したい場所にそのまま記述します。

ファイルには、下記表の要素に属性があらかじめ設定されています。余白については要素の余白についてをご確認ください。

要素名 用途と属性
svg スタイル調整用／ピクトグラム識別用
class属性／data属性
path トーン調整用
class属性・opacity属性
余白ガイド用
fill属性
HTML
<svg class="alpg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216" data-alpg-id="brand-1">
    <!--©︎ Animalize-->
    <path fill="none" d="M216,216H0V0H216Z"/>
    <path class="alpg-twotone" opacity=".27" d="M189.337,81.572l-131.6,95.6-31.078-95.6L108,22.5Z"/>
    <path d="M194.626,74.29,113.289,15.218a9,9,0,0,0-10.578,0L21.374,74.29A9,9,0,0,0,18.1,84.354l31.078,95.6a9,9,0,0,0,13.849,4.5L108,151.788l44.969,32.669a9,9,0,0,0,13.849-4.5l31.078-95.6A9,9,0,0,0,194.626,74.29Zm-41.1,88.325-30.217-21.952,48.9-35.526Zm-91.058,0L37.244,85.01,108,33.623l66.023,47.95Z"/>
</svg>

ピクトグラムの色や大きさなど表示の調整はCSSでも可能です。

設定された属性をそのまま使用する場合は、以下のような記述で自由に変更できます。さらにカスタマイズしたいときは名称などを置換してご利用ください。

CSS
.alpg {
    width: 54px;
    height: 54px;
    fill: #ff0033;
}
.alpg-twotone {
    opacity: .54;
}

SVG／PNG（外部ファイル）の場合

PNGファイルは「すべて保存する」からダウンロードできるZIPファイルに同梱しています。

保存したSVGやPNGファイルなどをそのままサーバーなどにアップロードして使います。

ほとんどの場合、ファイル自体を編集することで表示の調整が可能です。

imgのsrc属性に下記表を参照しながら、ファイルまでのパス（URL）を入力して読み込みます。

種類 用途と記述例
絶対パス 主に外部ファイルを参照するとき
https://example.com/alpg-brand-1.svg
相対パス 同じドメイン内に参照したいファイルがあるとき
../alpg-brand-1.svg
ルート相対パス どの階層でも同じ相対パスを使用したいとき（ローカル環境は使用不可）
/alpg-brand-1.svg
HTML
<img class="alpg" src="/image/alpg/alpg-brand-1.svg" alt="Animalize">

ピクトグラムの大きさやfilterを使用した編集など、簡単な表示の調整はCSSでも可能です。

下記例のvertical-alignはimgを表示したときにできる不要な余白の発生を防ぐために設定しています。不要な場合は削除してください。

CSS
.alpg {
    width: 54px;
    height: 54px;
    filter: grayscale(100%);
    vertical-align: middle;
}

編集アプリやソフトで使う

スマートフォンやパソコンの編集アプリ、ソフトでピクトグラムを使うことができます。

動画のサムネイル画像やブログ記事の画像、配信画面のデザインなど多岐にわたる利用が可能です。

PNG（ビットマップ形式）の場合

PNGファイルは「すべて保存する」からダウンロードできるZIPファイルに同梱しています。

ダウンロードしたZIPファイルの圧縮を解除します。

編集ソフトからPNGファイルが入っているフォルダを開き、.pngの付いたピクトグラムを読み込みます。

SVG（ベクトル形式）の場合

「ピクセルグリッドにスナップ」などが有効の状態で読み込むとパスの形状が歪むことがあります。

「すべて保存する」からダウンロードした場合、ZIPファイルの圧縮を解除します。

編集ソフトからSVGファイルが入っているフォルダを開き、.svgの付いたピクトグラムを読み込みます。

要素の余白について

視認性を高めるため、ひとつの辺を16マスに分割したとき素材の内側に1マス以上の余白を設けています。

なお一部の素材では、視覚的調整により要素が中央に配置されていないことがあります。必要に応じて位置を調整してご利用ください。