SVG活用1 – アイコンのフォントではなく、SVGを使用した理由

この記事は、ブログのデザインを刷新し、得られた経験を共有している文だ。最初に、SVG活用の文を複数の方に分けて書いている。

SVGとは？

SVGはScalable Vector Graphicsの略です。増減減らしてもドットが見えないイメージをいう。ビットマップ（つまり、ペクセル社）を保存するのではなく、座標を保存して接続するようにするため、そうだ。このScalableしたもので代表的なのはフォントます（フォントももちろんビットマップフォントがありますが;)。

例えば、円をSVGで描画するには、以下のように書けばいい。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="42" cy="42" r="40" stroke="#34495E" 
    stroke-width="4" fill="#2ECC71"/>
</svg>

円を表すタグはcircleであり、cxとcyは重点の座標を意味する。 strokeは輪郭線の色、stroke-widthは、アウトラインの太さ、fillは、円の色を意味する。上記のようなタグを使えば以下のような形が出てくる。アウトラインのあるエメラルド（#34495E）ウォンだ。（座標を確認できるようにアウトラインを追加で打たれた。）

SVG 예제 이미지

▷実際の例を見る

別のファイルに入れる必要なく、 HTMLのように書いてくれれば表現される。タグのクラスとIDを少なくCSSとjsで制御できるので、大ヒットです。もちろん、タグに制御してもよい。

img 、 object 、 iframe 、 embedタグに入れることもできる。これにより、 CSS 、 jsで制御されないか、ちょっと複雑になる。女ねじった後に説明する。

SVGはかなり長い時間前に出てきた、高解像度のディスプレイが登場し、最終的に必要性が大きくなったようだ。レティナディスプレイのようppi （ pixel per inch 、インチあたりのピクセル数）が大幅に増えてきたディスプレイが出てきて、画像がぼやけて見える場合が生じた。

もちろん、画像を大まかに二倍のサイズに入れた後、 widthとheightを半分に減らしたまま表現するとされるのだった。しかし、 iPadとMacBook Proののレティ私はまた、インチあたりのピクセル数が異なる。 Androidの携帯電話にもppiがまた違う。うわー、最終的に最も簡単な解決策は、 ppiが最も高い機器に合わせて画像を入れるだろう。一般的なモニタのppiが72だから、その機器のppiに72を割ると、実際の画像を表現することの何倍にもするか出てくる。

しかし、これは、すぐに容量が心配になる。レティナiPhone 5に最適化された画像は、iPhone 3GSでもダウンロードして使用するのは帯域幅の浪費だ。さらに機器が画像のサイズを小さく見せなければなり、パフォーマンスにも問題が生じる。少量だが電池も無駄になる。

最近流行した解決策 – アイコンフォント

この問題に対応しながら、最近流行した解決策は、アイコンフォントです。 GitHubのようなところがアイコンフォントを使う。

アイコンフォントは、簡単に説明すると、Webフォントを利用してscalableしたアイコンを表示するのだ。 SVGと呼ばれる特定のフォーマットではありませんが、これもベクターグラフィックスを利用した方式が良い。

アイコンフォントは使用することも楽だった。例えば、以下のように使用すればよい。

<span class="icon-font">t</span>

CSSで。icon-fontのウェブフォントフォントを付ければ、tはtではなく、Twitterのアイコンになるのだ。私のブログにもちょっとアイコンフォントを適用したことがあった。

目的のアイコンに、Webフォントを作成してダウンロードすることができるようにするサイトもある。これを利用すれば、すごく楽に作業することができます。（IcoMoon）

アイコンフォントの限界 – フォントを強制的に指定すると割れる

しかし、アイコンのフォントには全く問題が一つある。ブラウザのフォントを強制的に指定して、見ている人にはアイコンが表示されないという問題だ。

私の家のネットサーフィン専用のコンピュータに敷かれたクロムのユーザースタイルシートには、以下のようなコードが入っている。

* {
    font-family: 'Malgun Gothic'!important;
}

FirefoxとIEのスタイルシートに触れることもなく、設定でフォントを強制的に適用することができる。一度強制的に適用した後、GitHubに入ってみてください。アイコンがすべて飛んでいくのを見ることができるのだ。

ブログのデザインを新しくし、アイコンフォントを使用せずにSVGを使用することにしたのはまさにそのような理由からだった。

いき

SVGは何で、なぜ使用するかを調べた。次の文は、イラストレーターを使用してSVGを作成する方法を簡単に調べてみる。

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。