沖縄 Web デザイン ヨセヤマブログ|OKINAWA WEB DESIGN YOSEYAMABLOG

沖縄で平面デザインとWEBデザインを主に生業にしています。このヨセヤマブログでは私の趣味や仕事でのTipsなどをメモ書きのようにBlogしています。参考にあれば幸いです。

< ミスター・ピーボディ・アンド・シャーマン(Mr. Peabo ...  | ザ・ブラック・ウォーター・バンパイア(The Black W ...>

SVGあれこれ|Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)でいろいろ図形を作ってみた。

 SVG(Scalable Vector Graphics:スケーラブル・ベクター・グラフィックス)でいろいろ図形を作ってみました。

Adobe Illustratorを使えば簡単にSVGの図形が出来る。

 最近の私のマイブームはSVGです。SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略です。簡単にいうとXMLベースでお絵描きができるのですが、このデータをWebでグラフィックとして使えます。SVGは、従来のJPGやGIFの様に大きさに比例して画像が重くならず軽いデータのまま拡大できる優れものです。Web上では何はともあれ軽いことはいいことです。

このSVGはAdobe Illustratorを使えば楽に作れます。アイコン程度のものなら本当に簡単に作れます。CSSで取り込んで加工もできます。html5が使えるスマートフォンのブラウザでは問題なく使えるので、これからのWebサイトの構築にどんどん使って行きたい技術です。

Adobe IllustratorでSVGデータを作ってみた!

1. まず!Adobe Illustratorで簡単な図形(アートワーク)を作成します。

2. その図形をファイルメニューから「保存」 を選択します。
※または、複製で保存でも保存できます。

3. 書き出しのダイアログボックスの「ファイル形式」から「SVG」または「SVG 圧縮」を選択します。

4. 保存先とファイル名を指定し「保存」ボタンをクリック。SVG オプションダイアログボックスで設定を行い「OK」をクリックします。
※ 「詳細オプション」ボタンをクリックすると、さらに設定項目が表示されます。

設定項目
SVG プロファイル:文書型定義(SVG XML DTD)を指定します。
文字:テキストの保存形式を指定します。
サブセット:ファイルに埋め込む文字を指定します。
参考方法:ラスタライズされた画像を埋め込むか、リンク配置にするかを指定します。画像を埋め込むとファイルサイズがその分大きくなりますが、画像は閲覧環境に依存せずに必ず表示されるようになります。
Illustrator の編集機能を保持:AI ファイルを SVG ファイルに埋め込むことによって、Illustrator 固有のデータを保持します。そのため、このオプションを有効にするとファイルサイズは大きくなりますが、後から Illustrator で修正を加えることができます。
CSS プロパティ:SVG コードのスタイル属性をどのように保存するか指定します。「プレゼンテーション属性」を指定すると、階層構造の最上位のプロパティが適用されます。「スタイル属性」を選択するとファイルの読みやすさは向上しますが、ファイルサイズは大きくなります。「スタイル属性 (実体参照)」を選択するとレンダリングに要する時間が短縮され、ファイルサイズも小さくなります。「スタイル要素」は、HTML 文書と共有する場合に使用します。
小数点以下の桁数:ベクトルデータの精度を指定します。1 ~ 7 の範囲で値を指定することができます。指定した値が大きいほど画質が向上しますが、ファイルサイズは大きくなります。
エンコーディング:文字のエンコード方法を指定します。
Adobe SVG Viewer 用に最適化:このオプションを有効にすると、データの品質を保ったまま、SVG ファイルを手動で編集することができます。
Adobe Graphics Server データを含める:変数を使用したデータ駆動型グラフィックを作成した場合、変数の置換に必要な情報をすべて含めて書き出します。
スライスデータを含める:スライスの位置と最適化設定を含めて書き出す際に有効にします。 ●XMP を含める:XMP メタデータを含めた SVG ファイルを書き出す際に有効にします。XMP メタデータの内容は Adobe Bridge で参照、編集が可能です。
エレメントの出力を制御:自動カーニングの設定を無視して書き出しを行います。
パス上テキストにエレメントを使用: エレメントを使用してパス上のテキストを書き出します。
SVG コードを表示:ブラウザを起動し、SVG ファイルのコードを表示します。
Webプレビュー:ブラウザを起動し、SVG ファイルをプレビューします。

5. アートワークが SVG 形式で保存されます。

試しにアイコンを作ってみた!

 せっかくなのでいくつかアイコンを作ってみた。大きさは縦・横13pxです。

1.  2.  3.  4.  5.

上記の五つのアイコンのソースが下記です。xml宣言は入れていますがhtml上にインラインで使う場合は<svg>から</svg>内を記述してください。

1. starA.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" enable-background="new 0 0 13 13" xml:space="preserve">
<circle cx="6.5" cy="6.5" r="6.34"/>
<polygon fill="#FFFFFF" points="6.5,8.439 3.788,10.232 4.656,7.099 2.112,5.074 5.36,4.931 6.5,1.886 7.64,4.931 10.889,5.074 8.344,7.099 9.212,10.232 "/>
</svg>

2. starB.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" enable-background="new 0 0 13 13" xml:space="preserve"> <polygon points="6.5,9.8 2.74,12.286 3.942,7.941 0.416,5.134 4.919,4.936 6.5,0.713 8.08,4.936 12.585,5.134 9.056,7.941 10.26,12.286 "/>
</svg>

3. hexagon.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" enable-background="new 0 0 13 13" xml:space="preserve"> <circle cx="6.5" cy="6.5" r="6.34"/>
<polygon fill="#FFFFFF" points="4.352,10.221 2.203,6.5 4.352,2.779 8.648,2.779 10.797,6.5 8.648,10.221 "/>
</svg>

4. hexagon.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" enable-background="new 0 0 13 13" xml:space="preserve">
<circle cx="6.5" cy="6.5" r="6.34"/> <polygon fill="#FFFFFF" points="10.576,5.671 7.328,5.671 7.328,2.406 5.688,2.406 5.688,5.671 2.406,5.671 2.406,7.312 5.688,7.312 5.688,10.576 7.328,10.576 7.328,7.312 10.576,7.312 "/>
</svg>

5. minus.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13px" height="13px" viewBox="0 0 13 13" enable-background="new 0 0 13 13" xml:space="preserve">
<circle cx="6.5" cy="6.5" r="6.34"/> <rect x="2.406" y="5.671" fill="#FFFFFF" width="8.17" height="1.642"/>
</svg>

< ミスター・ピーボディ・アンド・シャーマン(Mr. Peabo ...  | ザ・ブラック・ウォーター・バンパイア(The Black W ...>