元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【SVG】SVGの素材を作る・書き出す

単純な形のものでしたら、タグを使ってSVGデータを作ることができます。しかし、複雑な形状のものになると手書きのコードで作るのは現実的ではありません。そこで、ベクターデータを編集できるソフトを使い、SVGの素材を作る方法を見ていきます。

IllustratorSVGを書き出す

  1. 素材を作る
    • テキストが含まれる場合、アウトライン化する
  2. レイヤーが複数ある場合、1つに結合する
  3. SVGファイルとして書き出す(保存する)

PhotoshopSVGを書き出す

私が使用している古いフォトショでは、SVGに書き出せませんでした。対応しているバージョンもあるようなので、そちらをご利用ください。手順は、参考サイトをご確認ください。フォトショも基本的には、SVGに書き出すようです。

素材から必要なデータを抜き出す

書き出したSVGファイルをテキストエディタで開くと、見慣れないデータが含まれているのが分かります。保存したSVGファイルの中身は、以下のようになっています。

<!-- 書き出されたSVGデータ -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
<!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="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<circle fill="#003DFF" stroke="#FC034A" cx="149.5" cy="149.5" r="145"/>
</svg>

上記のコードから必要なところだけをコピーし、新たにSVGファイルを作成します。SVGタグで囲んでいるところを抜き出せば良いです。参考サイトによると、SVGタグ内のenable-background="new 0 0 300 300"xml:space="preserve"を削除して良いそうなので、削除します。あとは、id名を必要に応じて変更してください。

<!-- 不要な部分を削除、変更後のSVGデータ -->
<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="300px" height="300px" viewBox="0 0 300 300">
<circle fill="#003DFF" stroke="#FC034A" cx="149.5" cy="149.5" r="145"/>
</svg>

これで、SVGの素材が完成しました。

SVGデータの圧縮

データの容量が気になる場合、データを圧縮すると良いです。SVGもデータ圧縮できるそうなので、参考サイトをよく確認の上、利用してください。

素材について

何でもそうなのですが、素材を自分で作れると自分が欲しいもの、そのものを用意できます。どこまで自分が担当するのかの話にもなりますが、素材を自作できるとアドバンテージになるので、できるに越したことはないです。もちろん、他の方が作った素材を使わせてもらうのも一つの手です。

参考サイト