G&W Design Life

イラレデータからSVG画像を作成

SVG

svgデータの作り方

(1)パスで画像を作成します。
ボードの大きさで書き出されてしまうので、画像サイズにした状態で書き出しましょう

パスで画像を作成

(2)イラレのメニュー”ファイル”から”別名保存”を選択

(3)SVG形式を選択します

SVGの表示方法

やり方はimgで画像としてリンクするか、svgコードを貼り付けるかの2種類があります。

(1) 書き出したデータをimgタグでリンクさせる

<img src="images/sample.svg" />

(2) svgコードを記述して表示させる
吐き出されたデータをテキストエディタで開き〜部分をhtmlに貼り付けます

イラレデータからSVGを作成ができれば画像サイズを気にせずとても安心です^^
photshopにも同じような形で作れますが、個人的にイラレのパスから作成した方が綺麗に作れると思っています。参考になれば幸いです!

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category