How should an inline SVG look like

Question

I want to be able to style/change the various parts/paths of an svg, using css or jquery

After some searching, I realize this can't be done with svg-xml as it is (without using extra js/jquery script or other)

So now I'll go for inline svg

How is the complete tag supposed to look like? I mean the correct markup

This is what I have:

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 492.69 617.696">
  <circle fill="#FFFFFF" stroke="#00ABEB" stroke-width="32" stroke-miterlimit="10" cx="246.16" cy="222.62" r="206.843" />
  </g>
</svg>

Do I even need all the version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ?

Well I guess I just need to remove the xml part.. it works and validates — mowgli

Robert Longson Robert Longson · Accepted Answer · 2014-06-21T13:36:29

xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" are not required if you are serving the page as text/html, they are only required for XML documents.

All UAs that I know of ignore the version attribute so you can omit that too.

You cannot however have a </g> tag without a starting <g> tag so your markup there is invalid.

How should an inline SVG look like

1 Answers