SVG images formatting

Question

I needed to create a simple arrow for a slideshow, so I went through the W3 tutorial and came up with a simple SVG image:

<svg width="25" height="60">
  <polyline points="3,3 22,30 3,57" style="fill:none;stroke:black;stroke-width:3;stroke-linecap:round"></polyline>
</svg>

However, on some websites I see that they use some additional references (example from the kickstarter homepage):

<svg ... version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

Are those references to w3 and version are necessary or redundant to use? Are there any special rules for formatting svg images?

score 1 · Accepted Answer · answered Dec 22 '15 at 06:03

Those attributes are used to help the browser (including any software that reads XML) to understand the type (schema) of this content. Html is type of XML after all and it's important that the software (the browser in this case) will be able to distinguish between them.

It has been a long standing goal of the W3C to make it possible for different types of XML based content to be mixed together in the same XML file. For example, SVG and MathML might be incorporated directly into an XHTML based scientific document. Being able to mix content types like this has many advantages, but it also required a very real problem to be solved.

From MDN Docs

Thanks for the link to MDN. It explains pretty much everything. — sdvnksv, Dec 22 '15 at 06:50

score 1 · Answer 2 · answered Dec 22 '15 at 13:29

1

They are not necessary, and can be removed, if your SVG is inlined in an HTML file. Browsers know what an <svg> element is, and what namespace to use. However they must be included if it is a standalone SVG file.

answered Dec 22 '15 at 13:29

Paul LeBeau

97,474
9
154
181

That's a useful addition. Thanks! – sdvnksv Dec 22 '15 at 15:34

SVG images formatting

2 Answers2