SVGの基本的な描き方は「SVG入門」で書きましたが、四角や丸などを描くならまだしもちょっとしたイラストを描くだけでもコードで描写するのは現実的ではありません。
今回はIllustratorであらかじめイラストを作成しておいて、そのデータをSVG化してからインラインSVGとしてコードを記述する方法を説明します。
illustratorでイラストを作成する場合は、Web用として作成します。つまりイラストを書き出す時にサイズが１px以下の小数になっていると余計な線が入ったりします。
最低限イラストの外枠の座標と縦横のサイズは最低１px（小数点を付けない）になるようにします。詳細は「Illustrator〜1ピクセル単位で正しく保存する」を参考にしてください。
出来上がったイラストはSVG形式で保存します。CCでは保存メニューからではなく「書き出し」メニューからSVGで書き出すようにと促されます。
SVG書き出しの際に表示されるパネルの左下には「コードを表示」ボタンがあります。このボタンをクリックするとSVGコードが吐き出されます。
吐き出されたSVGコードをHTML文書の適切なところに貼り付けます。
次のサンプルはキャラクターのDogロボのイラストをSVG化して、IllustratorからSVGコードを吐き出させてからそのままHTMLに貼り付けたものです。
Dogロボのイラスト
画面いっぱいにキャラクターのイラストが広がっています。
SVG形式ですから画像が大きくても線は綺麗なはずです。ブラウザをドラッグして縮めるとキャラクターも一緒に縮みます。
もし、キャラクターをブラウザいっぱいに広げるのではなく、特定のサイズで表示しておきたい場合はsvgタグの中の属性にwidthとheightを指定します。更にviewBoxの値もwidthとheightの値と同一にしておきます。
これらの操作は「SVG入門」で「幅と高さの指定」で説明したとおりです。
幅と高さの指定を行い、stroke-widthの単位を整数に変更したサンプルが次のものです。
Illustratorの吐き出すSVGコードはSVG描画領域のサイズ指定がありませんので自分で調整する必要があります。あと不要なコードは削除しておきます。（日本語の入ってしまったID名など）
imgタグで埋め込み
SVGファイルを通常のjpg画像などと同様にimgタグを使用して埋め込むことも可能です。
コード
<img src="dog.svg" alt="" width="300" height="300">
CSSのbackgroundで表示
SVGファイルをCSSのbackground-imageで表示することもできます。
HTMLコード
<div class="dog"></div>
CSSコード
.dog{
background: url(dog.svg) no-repeat;
width:300px;
height:300px;
}
コメントを投稿するにはログインしてください。