SVGの見え方がブラウザで違う（解決）
要約
- 結城浩のアイコン（スレッドお化け坊や）をSVGで作ったのですが、Firefoxだけ縦長になってしまいました。
- SVGのwidth,heightが等しくないのに正方形を指定して、しかもviewBoxが指定してなかったからとの指摘で解決しました。
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>解決
- @rikuo
さんに
viewBox="0 0 840 692"を指定すればよいのではと教えていただいて解決しました。ありがとうございます。
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>