SVG
2022年2月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「SVG」について書きます。
SVGとは
SVGとはScalable Vector Graphicsの略で「大きさを変えられるベクター画像」という意味です。
ベクター画像とは、画像の色や形を座標で表現したもので、拡大しても画像が荒くならないなどの特徴があります。
(対義語はビットマップ画像)
ベクター画像 vector graphics
別名:ベクトル、ドロー
点や線を数値と計算式で表現する
アイコンやロゴなどの単純な図形に向く
EPS、PDF、SVGなど
ビットマップ画像 bitmap image
別名:ラスター、ペイント
点の集合で画像を表現する
写真などの複雑で色鮮やかな画像に向く
GIF、JPEG、PNG、TIFFなど
ビットマップ画像は拡大してみるとフチがちょっとギザギザになるのがわかります。
上のベクター画像を右クリック→新しいタブで画像を開く→さらに右クリックでページのソースを表示、とすると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は画像を座標で表したもの
・すごい!はっきりきれいに見える!
次回はSVGを動かしてみます!