SVG

2022年2月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「SVG」について書きます。

SVGとは

SVGとはScalable Vector Graphicsの略で「大きさを変えられるベクター画像」という意味です。

ベクター画像とは、画像の色や形を座標で表現したもので、拡大しても画像が荒くならないなどの特徴があります。
（対義語はビットマップ画像）

ビットマップ画像は拡大してみるとフチがちょっとギザギザになるのがわかります。

上のベクター画像を右クリック→新しいタブで画像を開く→さらに右クリックでページのソースを表示、とするとsvgのコードを見ることができます。

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

<style type="text/css">
  .st0 {
    fill: #32bdeb;
  }
  .st1 {
    fill: #ff1493;
  }
</style>

<path class="st0" d="M327.5,383.3c4.7,4.7,4.7,12.3,0,17L282.8,445c-59.3,59.3-155.7,59.3-215,0c-59.3-59.3-59.3-155.7,0-215l44.7-44.7c4.7-4.7,12.3-4.7,17,0l39.6,39.6c4.7,4.7,4.7,12.3,0,17l-44.7,44.7c-28.1,28.1-28.1,73.8,0,101.8c28.1,28.1,73.8,28.1,101.8,0l44.7-44.7c4.7-4.7,12.3-4.7,17,0L327.5,383.3z" />

<path class="st1" d="M216.7,177.3c4.7,4.7,12.3,4.7,17,0l44.7-44.7c28.1-28.1,73.8-28.1,101.8,0c28.1,28.1,28.1,73.8,0,101.8l-44.7,44.7c-4.7,4.7-4.7,12.3,0,17l39.6,39.6c4.7,4.7,12.3,4.7,17,0l44.7-44.7c59.3-59.3,59.3-155.7,0-215c-59.3-59.3-155.7-59.3-215,0l-44.7,44.7c-4.7,4.7-4.7,12.3,0,17L216.7,177.3L216.7,177.3z" />

<path class="st1" d="M408.9,352.9L371,390.8c-4.9,4.9-12.8,4.9-17.6,0L139,176.5c-4.9-4.9-4.9-12.8,0-17.6l37.9-37.9c4.9-4.9,12.8-4.9,17.6,0l214.3,214.3C413.8,340.2,413.8,348.1,408.9,352.9z" />

</svg>

グレートですよこいつはァ

とりあえずわかることは、

・3つのパス（path）でできている
（と と）

・fillは塗りつぶし

・Mで始まってzで終わる

描画方法のコマンド（cとかLとか）は引き続き勉強します。

つくってみよう

Illustratorの場合

① 画像を作る

② 書式→アウトラインを作成

③ 名前を付けて保存→svg（1.1）

Googleスライドの場合

① 画像を作る

② ファイル→ダウンロード→Scalable Vector Graphics（.svg、現在のスライド）

（作るだけなら）簡単ですね！

まとめ

・SVGは画像を座標で表したもの

・すごい！はっきりきれいに見える！

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

次回はSVGを動かしてみます！