![](https://design-tera.com/wp-content/uploads/2023/01/fd1b863e460fa5d1209f04e6f584e113-133x85.jpg)
svgファイルってなに?svgファイルの作成方法と特徴について。
カテゴリ:クリエイティブ
![](https://design-tera.com/wp-content/uploads/2016/08/svg-1.jpg)
![svgデータの作成方法](https://design-tera.com/wp-content/uploads/2016/08/svg.jpg)
レスポンシブ化が今後よりいっそう進んでいく中でブラウザのsvgデータへの対応もかなり進んできて実用出来るようになってきました。
サイトによってはjpegは一切使わずにsvgだけのサイトも出てきました。
今回はsvgの解説とファイルの作成方法を紹介します。
インデックス
1.svgとは
Illustratorを使った事がある人はわかると思いますが画像がパスのデータになっており、編集が可能です。
一般的にベクター(ベクタ)と呼ばれる物で一見すると画像データなのですが、画像のバックにはxmlで書かれたコードが流れています。
下記参照。
![svgのバックに流れているコード](https://design-tera.com/wp-content/uploads/2016/08/svg.png)
ブラウザはコレを読み込んで画像を表示してくれます。
利点としてはファイルサイズの小さい事と拡大縮小でも綺麗に表示される事です。
下記を見てください。
![svgとpngの比較画像](https://design-tera.com/wp-content/uploads/2016/08/hikaku.jpg)
pngは拡大縮小すると画像が荒くなってしまいますが、svgファイルは荒くなる事は有りません
これは、svgデータが画像ではなくコードを読み込んでいる為です。
今後はさまざまなデバイスでWEBサイトが観覧されることが増えていくので需要もかなり大きくなってきます。
2.svgの作成方法。
Illustratorでテキストの記入やパスを起こします。
![パスとテキストを入力](https://design-tera.com/wp-content/uploads/2016/08/cart.png)
全てのデータを選択した状態でツールバーのオブジェクト→パス→パスのアウトラインでパスにアウトラインをかけます。
![パスにアウトラインをかける](https://design-tera.com/wp-content/uploads/2016/08/outline.png)
文字データも同様に書式→アウトラインを作成でアウトラインをかけます。
![テキストにもアウトラインをかける](https://design-tera.com/wp-content/uploads/2016/08/text-outline.png)
パスを結合します。
![パスをすべて結合](https://design-tera.com/wp-content/uploads/2016/08/pass.png)
最後に保存です。
![svgで保存](https://design-tera.com/wp-content/uploads/2016/08/svg-save.png)
恐らくウインドウが立ち上がりますので、下記の設定で保存してください。
![保存の設定](https://design-tera.com/wp-content/uploads/2016/08/save-setting.jpg)
3.コードの抽出方法
svgファイルをテキストファイルで開くとテキストデータが抽出出来ます。