2015-07-22   svg   image 

SVGの見え方がブラウザで違う(解決)

要約

HTML

<!DOCTYPE html>
<html>
<img
  style="border: 1px solid black; width: 100px; height: 100px"
  src="https://snap.textfile.org/static/images/hyuki-ghost-bold.svg">
</html>

表示結果の比較(修正前)

SVG(修正前)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="840"
   height="692"
   id="svg3053"
   style="display:block">
  <title
     id="title3077">icon.graffle Page1</title>
  <metadata
     id="metadata3081">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>icon.graffle Page1</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs3055">
    <style
       type="text/css"
       id="style3057" />
  </defs>
  <path
     d="m 0,0 0,692 840,0 0,-692 z"
     id="path3059"
     style="fill:none;stroke:none" />
  <path
     d="m 685.2,653.8 c -39,4.3 -113.5,-31.1 -161.9,-34.6 -48.4,-3.5 -70.7,24.9 -97.2,39.2 -26.5,14.4 -57.2,14.8 -80.4,9.1 -23.3,-5.7 -39.2,-17.5 -64.6,-25.9 -25.5,-8.4 -60.5,-13.3 -89.3,-10.5 -28.8,2.7 -51.3,13.2 -73.1,23.9 -21.8,10.7 -42.9,21.6 -62.1,20.8 -19.2,-0.8 -36.6,-13.3 -38.3,-22 8.6,-39 14,-57.9 17.6,-87.5 3.5,-29.6 5.3,-69.8 9,-116.2 3.6,-46.5 9.2,-99.1 18.5,-146.9 9.3,-47.8 22.4,-90.7 39.6,-125.9 17.2,-35.1 38.5,-62.5 62.3,-85.3 23.8,-22.8 50.2,-41 80.2,-54.1 30.1,-13.1 64,-21.2 109.1,-20.2 45.1,1 101.4,10.9 143.7,43.5 42.2,32.7 70.3,88 91.6,148.6 21.3,60.7 35.7,126.8 49.3,179.6 13.6,52.8 26.3,92.4 35.3,132.6 9,40.2 14.2,80.9 14.6,103.8 0.5,22.9 -3.9,28 -21.2,28"
     id="path3061"
     style="fill:none;stroke:#000000;stroke-width:31;stroke-linecap:round;stroke-linejoin:round" />
  <path
     d="m 620.5,321.5 c 10.1,-1.2 25.1,-2.4 43.8,-5.7 18.6,-3.3 40.8,-8.7 68.1,-9.5 27.4,-0.7 59.8,3.1 68.1,16.9 8.3,13.8 -7.6,37.6 -23.9,57.2 -16.3,19.7 -32.8,35.4 -52.1,47.9 -19.2,12.6 -41,22 -65.3,32.2"
     id="path3063"
     style="fill:none;stroke:#000000;stroke-width:31;stroke-linecap:round;stroke-linejoin:round" />
  <path
     d="m 319.7,359.3 c 1.7,2.6 6.3,7 12.1,10.6 5.8,3.5 12.8,6.2 19.8,8.8 7,2.5 14,5 22.1,6.6 8.1,1.6 17.3,2.4 28.2,2.5 10.8,0.1 23.3,-0.5 37.1,-6.1 13.9,-5.5 29.2,-16.1 45.3,-31.1"
     id="path3065"
     style="fill:none;stroke:#000000;stroke-width:31;stroke-linecap:round;stroke-linejoin:round" />
  <path
     d="m 341.1,222.7 c 8.4,8.5 8.4,22.2 0,30.7 -8.5,8.4 -22.2,8.4 -30.6,0 -8.5,-8.5 -8.5,-22.2 0,-30.7 8.4,-8.4 22.1,-8.4 30.6,0 z"
     id="path3067" />
  <path
     d="m 341.1,222.7 c 8.4,8.5 8.4,22.2 0,30.7 -8.5,8.4 -22.2,8.4 -30.6,0 -8.5,-8.5 -8.5,-22.2 0,-30.7 8.4,-8.4 22.1,-8.4 30.6,0"
     id="path3069"
     style="fill:none;stroke:#000000;stroke-width:11;stroke-linecap:round;stroke-linejoin:round" />
  <path
     d="m 481.8,222.7 c 8.5,8.5 8.5,22.2 0,30.7 -8.4,8.4 -22.1,8.4 -30.6,0 -8.5,-8.5 -8.5,-22.2 0,-30.7 8.5,-8.4 22.2,-8.4 30.6,0 z"
     id="path3071" />
  <path
     d="m 481.8,222.7 c 8.5,8.5 8.5,22.2 0,30.7 -8.4,8.4 -22.1,8.4 -30.6,0 -8.5,-8.5 -8.5,-22.2 0,-30.7 8.5,-8.4 22.2,-8.4 30.6,0"
     id="path3073"
     style="fill:none;stroke:#000000;stroke-width:11;stroke-linecap:round;stroke-linejoin:round" />
</svg>

解決

https://twitter.com/rikuo/status/623812578611888128

差分

diff --git a/static/images/hyuki-ghost-bold.svg b/static/images/hyuki-ghost-bold.svg
index 9abad4e..fad1bf8 100644
--- a/static/images/hyuki-ghost-bold.svg
+++ b/static/images/hyuki-ghost-bold.svg
@@ -11,6 +11,7 @@
    width="840"
    height="692"
    id="svg3053"
+   viewBox="0 0 840 692"
    style="display:block">
   <title
      id="title3077">icon.graffle Page1</title>
 2015-07-22   svg   image