×複雑なオブジェクトに不向き×大量に読み込ませると動作が不安定になる違いはこんな感じです。拡大しても画質が落ちないSVGの使用は一般的となりました。現状は、あくまでアイコンなどの単色でシンプルなオブジェクトに使うことが一般的です。これを踏まえて使い分けしていくのが好ましいですね。STEP.1オブジェクトのアウトライン化SVGの特徴を知っていただいたところで、さっそく本題に入っていきます。SVG化したいファイルをIllustratorで開いてください。1各調整ではまず下記4点を確認して必要な作業を行ってください。※Linustockのファイルではcolorレイヤーを削除2オブジェクトのアウトライン化ご希望の線の幅、サイズになりましたか?そうしましたら、アウトライン化です。パスのアウトラインでアウトライン完了です。STEP.2アートボードからはみ出した箇所を削除アートボードからはみ出す箇所がない場合は次のSTEP.3に進んでください。はみ出してる方と、世の中からはみ出している方はこのまま読んでください。通常、pngやjpg等を書き出す場合はアートボードからはみ出た箇所は削除されデータとして残らないのですが、svgファイルでははみ出した箇所もデータ情報として残ってしまいます。これ実は、結構知られていないんです。)」を使って削除してしまいましょう。※詳しいシェイプ形成ツールの使い方は「シェイプ形成ツールの使い方」にてご確認ください。以上で、はみ出した部分の削除が完了です。STEP.3いよいよ書き出しそれではSVGで書き出します。S(別名で保存)を押してください。上記、画面が出たらSVGを選択し保存をクリック。すると、SVGオプションが開きます。なんか見た目が違うという方。パネル左下の「詳細オプション」をクリックしてみてください。上記のような画面になったかと思います。あとは上記画像の黄色線部分を確認してください。設定内容は下記としています。・Illustratorの編集機能を保持のチェックを外す・CSSプロパティ/スタイル要素に・小数点以下の桁数/3・レスポンシブのチェックを外すで、最後にOKを押してください。SVGの書き出しができました。STEP.4SVGファイルの最適化・軽量化このままでも十分ですが、まだまだ軽くすることができます。ご存知の方も沢山いらっしゃるかと思いますが、SVGOMGというウェブツールを利用します。ちなみに私はブックマークしてます、このサイト。このサイトで簡単に最適化・軽量化できます。SVGOMGを開きましたら、STEP.3で書き出したファイルをそのままブラウザにドロップ。すると下記の様な画面になります。images」という項目は必ずオンにしておきましょう。50%弱も軽量化されますね。最後に上記画像内の黄色箇所をクリックしてダウンロードしてください。最適化・軽量化が完了しました。お疲れ様です、以上でSVGファイルの書き出しが完了しました。むすびとっても簡単にSVGファイルができましたね。SVGOMGというウェブツールが本当にありがたい限りです。サイトに動きを持たせたりする際にはSVGが活きると思います。最初からSVG形式もダウンロードできれば簡単なのに、なんでLinustockはSVG形式を配信しないの?という質問をたまに頂戴します。開始当初は配信するか本当に悩みました。線の幅や不要になる箇所など、ある程度自由を残して、イラストを使用される方に委ねたいと考え、SVG配信はやめることにしました。それとやはり複雑な線が多い場合もあるので、ご使用された際に読み込みが重くなる可能性もあったためです。したら技術の進歩により、いつかSVG配信をするかもしれませんが。ひきつづきLinustockをどうぞよろしくお願い致します。SVGアイコンになりそうなイラストも沢山あるLinustock。アイコンに素材を探す見つからなくても大丈夫です。無料でリクエストができます。無料でリクエストする。【1分で完成】スマホアプリで簡単色塗り。ibisPaintでPNGファイルもおしゃれにカラフルに。【超初級編】イラレで水彩画のような優しい色合いでイラストをオシャレに飾る方法。ぴあ(関西版)」に無料イラスト素材をふんだんにご利用いただきました。モノクロでシンプルな線画イラスト素材サイトLinustock.comをご利用のイカした皆さまへ【数分で完成】人工知能(AI)を使って簡単に油絵や水彩画のような味わい深い色付けをする。漫画の擬音(オノマトペ)風のフォントイラスト素材を作りました。want.リクエストする方法がございます。いただいた全てのリクエストにお応えすることはできかねますが、可能な限り対応させていただきます。styles.EPSは非アウトライン化データです。線の太さやタッチを簡単にご変更いただけます。変更方法はTECHNIQUEページよりご確認いただけます。different.今回はご希望に添えず残念です。素材数が多く安価なオススメサイトがございますので試しにチェックされてみて下さい。(外部サイトに飛びます。too.弊社でもよく利用しているオススメサイトがございます。クオリティがとにかく高く、とても利用しやすいです。(外部サイトに飛びます。【決定版】イラストデータをIllustratorでSVGに(アートボード通りに)書き出す方法。