Drawic

フッターのアイコンをSVGにした。GitHubにリポジトリも作っておいた。ぴくせる・ぱーふぇくとってなんでしたっけ……。

暗い背景向けの白いアイコンのみだけど、まぁそこは普通のSVGなのでエディターで開いてfillプロパティーの値を変えれば好きな色に変更できる。二種類ある矢印系には全方位を用意しなかったけど、transform属性でrotate()関数を利用して方向を調節できるのでそれで(若干中心をずらしてあるのでtranslate()も併用した方が良い)。

`shape-rendering: crispEdges`

crispEdgesを指定したものと指定していないものの比較。 — with crispEdges (Left) vs. w/o crispEdges (Right)

Deliciousのアイコンはrect要素を組み合わせたものなので、そのままでは拡大・縮小すると端がぼやけることがある。そういう時はみんなが独自実装したCSSのimage-renderingプロパティーですよねーとか思ったら全く意味がなかったので、SVG側のshape-renderingプロパティーでcrispEdgesを指定してシャープになるようにした。

<defs>
  <style><![CDATA[
    rect {
      shape-rendering: crispEdges;
    }
  ]]></style>
</defs>

rect要素の他にline要素にも使うと良いが、pathやcircle要素には使ってはいけない。でもこれ完全なピクセル等倍になるかどうかは実装依存で、例えばChrome 20なんかではシャープにはなるけど数pxずれたりする。一長一短なのでぼやけるのを受け入れて指定しないというのもアリだと思う。

ライセンス

ライセンスを決めてからエントリーにしようかと思ったけどまだ決めていない。パブリック・ドメインに捨てることはできなそうなので、面倒くさい。仮にCreative Commonsにするとして、SVGのmetadata要素でそのライセンスを埋め込むとしたら以下のような形になりそう。

<metadata>
  <rdf:RDF
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work rdf:about="">
      <cc:license rdf:resource="http://creativecommons.org/licenses/by-nc/3.0/"/>
      <cc:attributionName>Kyo Nagashima</cc:attributionName>
      <cc:attributionURL rdf:resource="http://hail2u.net/"/>
    </cc:Work>
  </rdf:RDF>
</metadata>

InkscapeでCCライセンス埋め込むと長いのでコンパクトになるように頑張って考えて書いた。Data URI化することも考えて、少しでもサイズを減らせるように。間違ってそう！

「なんで今さらSVGなの？　アイコン・フォントじゃないの？」みたいな話を明日書く。書かない。