SVG Arrow

確認に使ったWebKitベースのブラウザはChrome 15.0.874.121 mとSafari 5.1.2です。

WebKit以外ではキレイにリサイズされた矢印になる。WebKitではbackground-imageで使われたSVGを自動的にリサイズしてくれない。

`background-size`

SVGでwidthとheight属性を指定した上でCSSのbackgrond-sizeプロパティーを使ったリサイズを行うと、サイズを合わせることは出来るが、ラスタライズされてからリサイズされるようでぼやける。

`<svg width="100%">`

SVGのルート要素でのwidthとheight属性で100%を使うと、一見うまくいったように見えるが、同じSVG画像を更に利用した場合にリサイズ結果がコピーされる。上記デモだと最初の64pxへのリサイズがその後の128pxへのリサイズへ影響してしまう、または場合によってはその逆(挙動不審)。

`::before` Magic!

::before擬似要素とcontentプロパティーを使って画像を挿入する方法なら問題なし。

SVG Code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="left-arrow"
  viewBox="0 0 64 64"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(32), rotate(-45, 32, 32)">
    <g fill="none"
      stroke="#fff"
      stroke-width="8">
      <line x1="0" y1="4" x2="24" y2="4"/>
      <line x1="4" y1="0" x2="4" y2="24"/>
    </g>
  </g>
</svg>

background-size

<svg width="100%">

::before Magic!

SVG Code

`background-size`

`<svg width="100%">`

`::before` Magic!