Inkscape はコードで描かれている?

”Inkscapeは”と言いますかInkscapeで保存されたファイル形式、SVG(svg)がです。ですのでIllustratorイラストレーター(でもsvgで保存できます)やScratchスクラッチのイラストも同様にソースコードで描かれています。

 

Scratchを保存してファイルの中身を見てみる

ソースコードで描かれている、、どうゆう事?

プログラミングで書く、あのコードが存在するのです

 

Inkscapeで描いたファイルを見てみる

Inkscapeで描いて保存した「girl.svg」ファイルと

 

「hand.svg」ファイルで見てみます。

 

VSCodeなどのソースコードエディタ(編集ソフト)にデスクトップに保存した「girl.svg」ファイルをぐりっと持って行くと長いコードが出てきました。カラーが実際の色で表示されるように(VSCodeのプラグインで)設定してあるのでヘルメットの赤(#74151A)やピンク(#EB6685)がちゃんとコードで書かれているのが確認できます。

色数が多かったり図形が複雑だったりするとコードが長くなります。

 

1色で描いた「hand.svg」のコードは「girl.svg」の6分の1位で済んでいます。

 

もっと簡単、手軽にコードを確認する方法

VSCodeなどテキストエディタが無い方でも簡単に確認する方法があります。
svgファイルをWebブラウザにぐりっと持って行くと、

 

ファイルのイラストが表示されます。画面上で右クリック(Macの場合)>「ページのソースを表示」で、

 

ソースが表示されました。少し見にくいですが書いてある事は同じなのです。

 

 

コードで出来ている画像(イラスト)のメリット

コードで出来ているのは分かったけど、、だったら何なの?何か良い事があるの?

テキストと同じ扱いになるのでコードを書いて色や大きさが変更できます。このsvgで描いたワニにカーソルを当ててみてください。

緑から赤になります。

拡大縮小に強く、変更も簡単

これがjpegなどだった場合、緑と赤2つのワニ画像を用意する必要があり、やっぱり黄色にしたいなんて時は画像から書き換える必要があります。これがsvgの場合1つで済みます。

それから拡大縮小にも強いと言いましたが、今見ているこのサイトを200%など表示を拡大してみてください。ワニや男の子(そしてこのテキスト)はパキッと綺麗なままで説明画像(jpeg)などはぼやけます◎

サイトの顔となるロゴの保存形式

ただ、丸や三角で1色ならいいですがちょっと複雑な形になるとHTMLへの記述が(コードが)長くなります。ですので私ならicomoonでアイコンフォントにして使用すると思います。

 Font Awesomeのような感じで最大の特徴は自作できます↓

アイコンを作る

INKSCAPEでアイコンフォントを描く時の注意点

作れたら自分のサイトで表示↓

Inkscapeで描く→アイコンフォントにする→WordPress子テーマに入れる

Bootstrapのテンプレートにアイコンフォントを入れる

 

先程(3枚上の画像)右クリックして出てきた「ページのソースを表示」の下の「検証」を選択するともっと詳しくHTMLやCSSなどが見れます。黄色の手を、

 

緑や好きな色に変更出来ます。

 

INKSCAPEで写真をトレースして簡単に描く

 

サイト上で作ったsvgファイルをダウンロードしてInkscapeで加工する

例えば、流体図形が作れるジェネレーター「Generate blobs」。形、色、グラデーションなどを右側で設定した後、左下のコードを表示マークをクリックすると、

 

あ、svg〜って書いてある

コードが表示されるので「DOWNLOAD」します。

 

そのファイルをInkscapeで開くと作った図形が表示されました。

 

自由に加工できます。

 

SVG画像はパスの集合がテキスト情報で書かれたファイルなのでした。