CODEWITHSUNDEEP
svg
user3690315
user3690315

Reputation: 41

SVG fill property

i have SVG the property(fill/stroke/stroke-width) should be in style="..." or else out side

example :

<rect x="10" y="10" fill="red" stroke="green" stroke-width="1" width="80px" height="50"/>

-----------------------OR--------------------

<rect x="10" y="10" style="fill:red; stroke:green; stroke-width:1;" width="80px" height="50"/>

Which one is correct? Both are working and reason....

Upvotes: 3

Views: 228

Answers (1)

Boldewyn
Boldewyn

Reputation: 82734

As a matter of fact, both are correct. SVG was created in the late 90s. There all kinds of ideas how to auto-generate stuff were floating around. One was, for example, XSL-FO, which uses most of CSS's properties, but as attributes on elements:

<fo:block font-size="16px" color="red>Hello</fo:block>

In that time it seemed a good idea to double the possibilities to style SVG.

You need to take care, however, how the different properties cascade:

  1. If an element has a style attribute, this is used first

  2. If the SVG file has central CSS declarations, e.g., in a <style> element, those are used second.

  3. The attribute is only used then, as fallback.

For illustration:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>rect { fill: yellow; }</style>

  <rect fill="red" style="fill: green" width="100" height="100"/>
</svg>

The resulting color of the <rect> is... green.

Upvotes: 2

Related Questions