SVGというフォーマットは、大きさを持たないベクトル情報(パス)で表示を指定するので、拡大・縮小によって画質が劣化することが無く、しかもHTMLでサポートされているのでWEB向きの画像形式と言えます。

と言ってもリファレンスを睨んでいても何が何だかさっぱり分からないので、ともかく具体的にどんなものなのかを見るために、とりあえず弊ブログのアイコンを SVG化してみよう。どうせ変換サービスとかあるでしょ?
と、検索してみたら Convertio というサイトがヒットしたのでやってみました。


qxlA063_b   qxlA063_b

うーん、モノクロになっちゃうんですね。
それに、白いところが透明になってしまいました。
でもいろいろ当たってみた中では、このサイトが一番綺麗にできたんです。
左(PNG画像)は拡大するとギザギザが見えますが、右(SVG画像)は滑らかでしょう。
しかもファイルサイズはおよそ四分の三に縮小しています。

SVGファイルの中身はテキスト形式なので、メモ帳などでも編集しようと思えばできます。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="203.000000pt" height="291.000000pt" viewBox="0 0 203.000000 291.000000" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.12, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,291.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M156 2900 c-47 -15 -95 -53 -126 -101 l-30 -46 2 -1310 3 -1309 27 -41 c14 -22 46 -51 70 -64 l43 -24 845 -3 c646 -2 856 0 890 10 61 16 123 80 138 140 9 35 12 380 12 1310 0 1249 -1 1263 -21 1308 -23 52 -61 95 -104 118 -27 15 -108 17 -875 19 -465 1 -858 -2 -874 -7z m1730 -131 c23 -14 35 -30 39 -52 3 -18 4 -598 3 -1289 l-3 -1258 -33 -32 -32 -33 -830 -3 c-905 -3 -888 -4 -910 53 -6 17 -10 483 -10 1306 l0 1280 25 24 24 25 847 0 c837 0 847 0 880 -21z"/>
<path d="M1170 2221 c-52 -21 -111 -44 -130 -53 -47 -20 -148 -55 -245 -86 -63 -19 -111 -26 -230 -31 -146 -6 -150 -7 -153 -28 -5 -34 35 -45 163 -47 115 -1 189 11 290 45 292 101 451 111 619 37 57 -25 73 -28 93 -19 54 24 66 136 18 167 -12 8 -55 19 -96 24 -41 5 -92 14 -114 20 -70 17 -117 11 -215 -29z"/>
<path d="M1105 1612 c-68 -49 -72 -58 -42 -90 15 -16 27 -39 27 -53 0 -31 -64 -171 -84 -184 -28 -18 -30 5 -8 89 26 99 27 119 7 136 -25 20 -51 2 -98 -72 -50 -76 -56 -95 -32 -104 16 -7 20 -51 7 -72 -14 -22 -103 -25 -221 -8 -90 14 -120 15 -149 5 -53 -16 -57 -24 -26 -48 42 -33 119 -51 219 -51 75 0 114 6 216 36 232 66 296 78 460 79 143 1 162 7 196 55 20 29 9 36 -69 45 -72 9 -225 -7 -310 -31 -27 -8 -22 24 13 90 26 48 31 65 26 103 -6 54 -35 97 -68 101 -15 2 -41 -9 -64 -26z"/>
<path d="M1150 1204 c-36 -7 -94 -22 -130 -33 -73 -22 -222 -58 -260 -63 l-25 -3 0 -177 c0 -168 1 -179 21 -199 l22 -21 18 27 c57 82 84 87 84 15 0 -46 -3 -51 -27 -61 -15 -5 -46 -13 -69 -16 -41 -5 -43 -4 -49 23 -27 122 -61 190 -100 200 -45 11 -50 -6 -26 -105 30 -126 29 -135 -11 -128 -18 4 -61 9 -96 13 -58 6 -62 5 -62 -14 0 -46 77 -82 175 -82 34 0 47 -4 52 -17 16 -47 73 -163 80 -163 21 1 35 21 40 59 3 22 8 41 12 41 3 0 28 -7 55 -15 42 -13 51 -13 69 0 27 19 67 19 93 1 29 -21 213 -93 257 -101 26 -5 62 0 124 18 49 15 104 29 124 32 20 3 52 16 70 28 32 21 34 26 37 89 3 65 2 67 -30 91 -76 58 -163 96 -255 113 l-93 17 0 101 c0 76 6 126 26 204 22 88 24 106 13 117 -23 21 -70 25 -139 9z m-52 -121 c-3 -36 -4 -37 -66 -51 -35 -7 -65 -12 -67 -10 -3 2 -2 21 2 41 5 33 9 37 37 38 17 1 42 5 56 9 40 13 41 12 38 -27z m-218 -47 c0 -33 -15 -45 -57 -46 -21 0 -16 68 5 73 44 12 52 8 52 -27z m212 -85 c-4 -38 -5 -39 -61 -55 -32 -9 -61 -16 -65 -16 -4 0 -6 16 -4 36 3 36 4 37 68 54 36 10 65 18 65 19 0 1 -1 -17 -3 -38z m-212 -46 c0 -43 -1 -45 -30 -45 -30 0 -32 2 -34 57 -1 12 9 20 29 24 17 4 31 7 33 8 1 0 2 -19 2 -44z m219 -120 c1 -16 -10 -24 -48 -38 -74 -26 -81 -24 -81 26 l0 43 58 14 c55 14 57 14 64 -5 3 -11 6 -29 7 -40z m274 -112 c95 -30 110 -46 83 -88 -16 -24 -69 -45 -114 -45 -13 0 -52 -13 -87 -30 -71 -33 -86 -35 -136 -19 -103 33 -110 43 -51 77 l39 22 11 -25 c14 -31 29 -31 94 -3 56 24 70 48 61 102 -3 20 -2 36 3 36 5 0 48 -12 97 -27z m-273 -6 c0 -19 -10 -26 -56 -42 -48 -16 -57 -17 -65 -4 -16 26 -9 35 39 51 68 23 82 22 82 -5z m-220 -61 c0 -32 -3 -35 -47 -50 -25 -9 -47 -15 -48 -13 -10 12 -26 50 -22 53 3 3 92 37 115 43 1 1 2 -14 2 -33z"/>
</g>
</svg>
うん、編集しようと思えばできますね!
…思えば。
umesco2
ま、まあこのソースを頑張って見ていくと、g というタグの内側に path タグが四つ入っていることに気づきます。
sample アイコンの構成は、外枠、一の字、萬の草カンムリ、その下の部分、という同じく四つの閉鎖領域から成っているので、おそらくそれが対応している。複雑な形ほど長いパスが必要だろうから、四番目のパスデータがたぶん萬の下の部分を表しているに違いない。
…とアタリをつけて、fill属性にカラーコードを指定して確かめてみると、どうやらビンゴでした。

それぞれのパスが示す領域が特定できたところで、牌の内側の透明部分を白にしましょう。
一番簡単そうなのは、外枠の中を塗りつぶすことです。
そこでリファレンスを見ると渡りに船、矩形を描画する HTMLタグ=rectタグというものがあったので、これを使わない手はないよね。
その書式は、
<rect x="描画開始地点(左上)のx座標" y="同じくy座標"
width="領域の幅" height="領域の高さ" rx="角丸のx軸方向の半径" ry="角丸のy軸方向の半径" fill="塗潰し色" stroke="枠線の色" stroke-width="枠線の幅" />
であり、外枠を描画している一つ目の pathタグをこれで置き換えてやればいいはず。
牌の大きさは 203 × 291 ですが、ストローク(輪郭線)はパスが中心になるように描画されるため、ストロークの幅のぶん、矩形の領域は狭くしてやる必要があります。
つまり、storoke-width が 10px なら、10 ÷ 2 × 2 = 10 を、縦横の大きさから引いてやります。
するとこの場合、193 × 281 が矩形の大きさになります。
また描画開始地点も、通常(0,0)のところ、(5,5)にずれます。
最後に、丸みと色を指定します。
ところで、最初のコードを見ると gタグの属性で transform というものがあり、そこで scaleを0.1に指定しています。
たぶん gタグの中で大きなスケールでパスを設定すれば、0.1px単位といった、通常のHTMLの記法では不可能な細かい制禦ができるためだと思われます。
この0.1という縮尺が子要素に適用されるっぽいので、属性の値は10倍で指定する必要がありそうです。
以上から、rectタグの記述は
<rect x="50" y="50" width="1930" height="2810" rx="300" ry="300"
      fill="ivory" stroke="silver" stroke-width="100" />
こんな感じでいいでしょう。
あとは領域ごとに色を指定し直すなど微調整し、ファイルを保存しつつ、ブラウザで表示を確認します。

微調整はこんな風にテキストエディタとブラウザを並べてやると効率的です。
atom-firefix
ちなみに NSが今愛用しているエディタはこの ↑Atom です。
御存じの方も多いでしょうがこれはフリーソフトなのにものすごく高機能で、HTML、CSS、各種プログラミング言語などを自動的に色分け表示してくれるし、痒い所に手が届くすばらな編集機能満載で、拡張も手軽にできます。
その拡張パッケージの一つにSVGレビュワーというものもあるんですが、なんか環境が不備らしくてダウンロードできなかったのです…(泣)

閑話休題、SVGによるブログアイコンの完成です!
blog-icon
←こんな風にサイズを変えて行頭アイコンにもなります。Ctrl+'+'で拡大しても画質が落ちないことを御確認下さい。

ブログサービスで設定するブログアイコン、スマホ用アイコン、プロフィール画像などには JPGなど従来の画像ファイルしか使えないので、使いどころは主に記事の中になると思いますが…
早速裏技を使って、PC版のファビコンにしてみました。
わかるかな?
牌の色を完全な白じゃなく高級な象牙色に変えたので、視角を変えると少し黄色っぽく見えるのですよ。
この調子で咲-Saki-キャラのSVGアイコンを作っていけたらなと思います。

今回は便利なサイトや HTML にちょうど使える描画要素があったりでわりとすんなり行きました。
しかしもっと複雑な画像をきめ細かに編集するには Illustrator のように高価なソフトが必要で、なかなか手が出せないなー…
と思っていたら、Inkscape という有名なフリーソフトがそこそこ対応しているということを今更ながら知り、さっそくインストールしてみたのでありました。 (64bit 完全版)

これをマスターした暁には、SVGマスターと呼ばれていよう…
icon-master
Inkscape による SVGマスター先生の作品