edo1z blog

プログラミングなどに関するブログです

SVGでロゴを作成してみる

SVG 画像・動画処理

SVGはベクター画像。PNGはラスター画像。ラスター画像は、1ピクセル x 1ピクセルを色で表現するもの。ベクターは頂点座標と線の種類・太さとかで表現するもの。ベクターは拡大・縮小しても頂点座標とか計算できるので、画像がぼやけたり、文字がつぶれたりしない。

XMLで書いてみる

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70">
    <polygon id="poly" points="35,0 28.5,11 41.5,11" style="fill:gray;"/>
    <use xlink:href="#poly" transform="rotate(30, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(60, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(90, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(120, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(150, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(180, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(210, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(240, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(270, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(300, 35, 35)"/>
    <use xlink:href="#poly" transform="rotate(330, 35, 35)"/>
    <circle cx="35" cy="35" r="25" fill="#c21"/>
    <circle cx="35" cy="35" r="20" fill="#d80"/>
    <circle cx="35" cy="35" r="15" fill="#fff"/>
    <circle cx="35" cy="35" r="10" fill="#b50"/>
    <circle cx="35" cy="35" r="5" fill="#fb5"/>
</svg>

logicky.svgで保存したらsvgファイルが出来上がります。1KBと書いてある。

圧縮する

$ gzip logicky.svg

できたファイルを、logicky.svgzとします。これが圧縮されたSVGファイルで、ブラウザでも大体表示できます。（ローカル環境のchromでしか確認していません）サイズは385バイトと書いてある。pngで作ったロゴは64x64で3KBだから、全然違う。

Wordpressにアップしようと思ったらセキュリティの関係上アップロードできません的なエラーが表示された。SVGに対応していないらしい。

HTMLで表示させる

<html>
<head></head>
<body>
<h1>Test</h1>
<img src="logicky.svgz" width=100 height=100>
<p>上記はSVGロゴです。</p>
</body>
</html>

imgタグのwidthとheightを500に変えるだけで、拡大された画像がきれいに表示されます。