Search code examples
htmlsvgwidthinline-svg

Using 'px' as a unit on inline SVGs in HTML

Can I use px as a unit on inline svg images. For example using width="100px" and height="100px" in below example code is correct?

<svg width="100px" height="100px">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Solution

  • It's valid SVG. According to MDN, both the width and height attributes, are of type <length>, which is defined as follows:

    length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

    The length unit identifier is optional, but allowed in SVG attributes.