CODEWITHSUNDEEP
svggradientlinear-gradients
AndreyAkinshin
AndreyAkinshin

Reputation: 19021

Linear gradients in SVG without defs

I can use linear gradient in SVG with defs-section like:

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

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

Can I use linear gradient without defs-section? I find something like this:

<rect style="fill:lineargradient(foo)">

Upvotes: 20

Views: 8344

Answers (2)

Spadar Shut
Spadar Shut

Reputation: 15807

<defs> is needed only for structuring purposes; its value is that it suppresses display of elements you put inside it for definitional purposes that you don't want displayed. But since a gradient can be visible only when applied to a shape or another element, you can define it in any place of the document; it doesn't matter whether it's inside a <defs> section or not.

But you still have to stick to the correct syntax:

<rect style="fill:url(#myLinearGradient1)" ... />

In case there is doubt as to whether any of this works or not, here is the exact code from the question, as an executable stack snippet:

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

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

And here is the exact same code without the <defs>/<\defs>:

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

    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

Both of the above executable snippets show the intended result (in chrome and firefox at least), which is a 100x100 rectangle filled with a gradient (shades of green varying vertically):

Upvotes: 5

user2852263
user2852263

Reputation: 577

Yes you can indeed have a gradient without needing to have a defs element; you simply put the gradient element anywhere else in the code instead, for example like this:

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

  <linearGradient id="myLinearGradient1"
                x1="0%" y1="0%"
                x2="0%" y2="100%"
                spreadMethod="pad">
    <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
    <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
  </linearGradient>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

Upvotes: 3

Related Questions