画像ファイル形式「SVG」超入門!

WebフォントのFont Awesome を利用する際、コピーする画面で見つけた見知らぬ単語にビビって触らずにいたんですが、急に気になって調べてみたのが「SVG」です。

「これ何?」というところから、「で、何に使うの?」という疑問を調べてみました。

どうやらこれから主流になっていく「かも」しれない画像形式のようです。

Font Awesome で利用できる内容の整理

Font Awesome でアイコンのコードを貰う画面には、4個のボタンが並んでいます。

まずはこれらのボタンの違いや使い方を知っておきたいですよね。

4個それぞれのボタンをクリックするとでできることは、次の通りです。

  1. ユニコードをコピーできます。
  2. Glyph(グリフ)=絵文字がコピーできます。
  3. SVGコードのコピーができます。
  4. SVGファイルのダウンロードができます。

それぞれを何に使うのかをみていきましょう。

Unicode(ユニコード)

Unicodeは文字コードの業界規格のひとつです。世界中の様々な言語の文字を収録して通し番号を割り当ててあります。

Font Awesome のアイコンも、ひとつひとつにUnicodeが割り振られています。

CSSでアイコンフォントを表示するよう指定するcontentプロパティの値には、Unicodeを指定します。

新住所:東京都千代田区〇町〇丁目

.sample1:before{
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f015";
}

Glyph(グリフ)

フォント用語としての『グリフ』は、「字体」「見た目」を指す英語です。

例えば、文字(characterキャラクター)の「A」と言っても、フォントの種類によって見た目が異なります。

フォントごとにデザインされた、ひとつひとつの文字の形を『グリフ』といいます。

Font Awesome では、DTP(Desktop Publishing)用にフォントをダウンロードできます。ダウンロードしたフォントをインストールすると、WordやExcelなどでも使えるようになります。

「DTP(ディーティーピー)というのは、

PC上で印刷物のデータを制作することです。

ところがアイコンフォントの場合は、どの文字コードにアイコンが割り当てられているかがわかりません。そこで必要になるのがグリフです。

Font Awesome のアイコン画面でグリフをコピーし、Wordなどに貼り付けてみてください。デフォルトに設定されているフォントではアイコンとして表示されませんが、フォントの種類をインストール済みのFont Awesomeに設定すると、アイコンの形で表示されるはずです。

SVG

この記事の本題でもあるSVG。まずはWikiをみてみました。

Scalable Vector Graphics

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

出典: フリー百科事典『ウィキペディア(Wikipedia)』

要約すると『きれいに拡大・縮小できちゃう ベクター形式 の画像』ってなりますね。

Scalable = Scale(スケール) + able(できる) ⇒ 縮尺できる

もうひとつ加えると、SVGはXML(Extensible Markup Language)というマークアップ言語で構成されるものなので、HTML文書の一部として使用できるという特徴があります。

XMLとHTMLという言葉が似ているので混乱しますが、この二つは別のものです。

どちらもコンピューターに文章の組み立てを伝えるためのマークアップ言語ですが、HTMLはWebページの記述に使われます。XMLは異なる情報システム間でデータの共有や管理を行いやすくするために使われます。

HTMLが既に決められたタグを使うのに対し、XMLのほうはタグを自由に設定できるという自由度の高さが特徴です。また、データの共有が目的のために記述形式がシンプルで分かりやすいものになっています。

SVGはXMLをベースとしたアイコンなので、これまでのWebフォントに比べて拡大・縮小が自在で、拡張性が高いアイコンです。できることも品質的にも、今までよりレベルアップしています。

以上からわかるのは、Font Awesome サイトで用意された4つのボタンの内、

  • HTMLで使う場合は「3. Copy SVG code」をクリックしてコードをコピーする。
  • 画像ファイルとしてダウンロードして使う場合は「4. Download SVG file」をクリックする。

ということになります。

SVGファイルとしてダウンロードしたSVGファイルは、SVGファイルを扱えるソフトで利用&編集が可能です。対応ソフトの中で有名なものでは、Illustratorがあります。

WordPressでSVGファイルを使う

WordPressでのSVG使用に関しては、現在のところ未対応になっています。どうやらセキュリティの問題で非対応にしているようです。

どうしても使いたいという場合はプラグインで対応します。

最後に…

今回はFont Awesome利用をきっかけに、SVGについて調べてみました。

なるほどと思う部分と、慌ててサイトに取り入れるほどでもないかな…という感想に落ち着き、とりあえずは放置になりそうです。特にセキュリティ問題のために公式で非対応のものを使うまでもないか、という感覚です。

そのわりにはWordPressでSVGを使えるようにする方法を紹介するサイトも多いので、それだけ使いたい人が多いということなのでしょうね。

きっと問題解決したときにはWordPress側で採用されるでしょうし、個人的に使うのはその時でも十分だなと思いました。

どちらかというと印刷物を作るときに活用出来たらいいなと思う形式なので、次は手持ちのソフトでSVGを扱えるソフトがあるかを調べてみたいと思います。

タイトルとURLをコピーしました