単純な形のものでしたら、タグを使ってSVGデータを作ることができます。しかし、複雑な形状のものになると手書きのコードで作るのは現実的ではありません。そこで、ベクターデータを編集できるソフトを使い、SVGの素材を作る方法を見ていきます。
IllustratorでSVGを書き出す
- 素材を作る
- テキストが含まれる場合、アウトライン化する
- レイヤーが複数ある場合、1つに結合する
- SVGファイルとして書き出す(保存する)
PhotoshopでSVGを書き出す
私が使用している古いフォトショでは、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もデータ圧縮できるそうなので、参考サイトをよく確認の上、利用してください。
素材について
何でもそうなのですが、素材を自分で作れると自分が欲しいもの、そのものを用意できます。どこまで自分が担当するのかの話にもなりますが、素材を自作できるとアドバンテージになるので、できるに越したことはないです。もちろん、他の方が作った素材を使わせてもらうのも一つの手です。
