Reputation: 879
I have a simple SVG with a path, and it not drawing in all browsers. Why?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85.56" height="120"><path fill="white" stroke="black" d="M20.88-84C21.96-88.56 19.44-90.60 15.12-90.60C10.08-90.60 5.76-88.08 1.68-84.84C-0.72-82.92 0.12-79.20 1.68-78.24C2.76-79.20 3.48-79.68 4.08-79.68C5.16-79.68 5.76-78.60 5.28-76.68L-4.56-30.60C-3.12-29.64-1.08-29.04 1.08-29.04C5.40-29.04 9.96-31.08 11.16-36.60L18.48-70.80C21.72-74.64 25.20-77.04 29.52-77.04C33.48-77.04 33.24-73.80 32.40-69.96L24-30.60C25.44-29.64 27.48-29.04 29.64-29.04C33.96-29.04 38.52-31.08 39.72-36.60L47.16-71.52C50.28-74.88 53.52-77.04 57.60-77.04C61.56-77.04 61.44-73.80 60.48-69.96L55.44-46.08C52.44-32.04 58.80-29.04 64.80-29.04C72.84-29.04 80.88-34.56 86.52-40.92C87.24-41.76 87.60-42.72 87.60-43.56C87.60-44.76 86.88-45.84 85.56-46.44C82.56-43.44 77.40-40.44 72.96-40.44C70.56-40.44 69-41.88 69.72-45.36L75.60-72.96C78.72-87 70.92-90.60 65.52-90.60C58.56-90.60 52.56-85.44 47.52-78.24C47.88-86.76 42.36-90.60 37.44-90.60C30.60-90.60 24.60-85.68 19.68-78.60Z"/></svg>
Upvotes: 0
Views: 1920
Reputation: 124229
The path is off the top left of the screen. translating the path down and right allows it to be viewed, alternatively you could set a viewBox on the svg element e.g. viewBox="-100 -100 200 200". I've shown the translate option below.
I've also made the svg a little wider so the shape fits into the viewport.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="120" ><path transform="translate(7,100)" fill="white" stroke="black" d="M20.88-84C21.96-88.56 19.44-90.60 15.12-90.60C10.08-90.60 5.76-88.08 1.68-84.84C-0.72-82.92 0.12-79.20 1.68-78.24C2.76-79.20 3.48-79.68 4.08-79.68C5.16-79.68 5.76-78.60 5.28-76.68L-4.56-30.60C-3.12-29.64-1.08-29.04 1.08-29.04C5.40-29.04 9.96-31.08 11.16-36.60L18.48-70.80C21.72-74.64 25.20-77.04 29.52-77.04C33.48-77.04 33.24-73.80 32.40-69.96L24-30.60C25.44-29.64 27.48-29.04 29.64-29.04C33.96-29.04 38.52-31.08 39.72-36.60L47.16-71.52C50.28-74.88 53.52-77.04 57.60-77.04C61.56-77.04 61.44-73.80 60.48-69.96L55.44-46.08C52.44-32.04 58.80-29.04 64.80-29.04C72.84-29.04 80.88-34.56 86.52-40.92C87.24-41.76 87.60-42.72 87.60-43.56C87.60-44.76 86.88-45.84 85.56-46.44C82.56-43.44 77.40-40.44 72.96-40.44C70.56-40.44 69-41.88 69.72-45.36L75.60-72.96C78.72-87 70.92-90.60 65.52-90.60C58.56-90.60 52.56-85.44 47.52-78.24C47.88-86.76 42.36-90.60 37.44-90.60C30.60-90.60 24.60-85.68 19.68-78.60Z"/></svg>
I'm not sure why other UAs display your original drawing, I don't think they should.
Upvotes: 3