While SVG allows to load and use remote ressources (either graphic elements or paint servers), the current state of implementation is kind of messy. This little playground intent to try to figure how things actually work and how things fit with the SVG specification.

NOTE: All the following code samples assume a view box equal to 0 0 100 100. It is also assumed that remote ressources are loaded from the same origin (Cross-Origin is out of scope as it has to be solved at the spec level)

Local references

All these tests check the bevior of local references for solid color and paint servers

Local reference: fill attribute

We just make sure that using the fill attribute with a solid color is working

<circle
  cx="50" cy="50" r="40"
  fill="green" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local reference: fill property

We just make sure that using the CSS fill property with a solid color is working

<style>
circle {
  fill: green;
}
</style>

<circle
  cx="50" cy="50" r="40"/>
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local reference: fill attribute with a paint server

We just make sure that using the fill attribute with a paint server is working

<radialGradient id="#gradient">
  <stop offset="0%" stop-color="green" />
</radialGradient>

<circle
  cx="50" cy="50" r="40"
  fill="url(#gradient)" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local reference: fill property with a paint server

We just make sure that using the CSS fill property with a paint server is working

<radialGradient id="gradient">
  <stop offset="0%" stop-color="green" />
</radialGradient>

<style>
  circle {
    fill: url(#gradient);
  }
</style>

<circle
  cx="50" cy="50" r="40"/>
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote paint server

All these tests check how browsers handle remote paint server

Remote paint server: fill attribute

We apply a remote paint server through a fill attribute.

<circle
  cx="50" cy="50" r="40"
  fill="url(paint.svg#gradient)" />
base.svg
<radialGradient id="gradient">
  <stop offset="0%" stop-color="green" />
</radialGradient>
paint.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11
Chrome and Safari don't load remote paint servers, even if they are from the same origin. Interrestingly enough, Chrome fallback to transparent where Safari and IE11 fallback to black for rendering the element.

Remote paint server: fill property

We apply a remote paint server through a CSS fill property.

<style>
  circle {
    fill: url(paint.svg#gradient);
  }
</style>

<circle
  cx="50" cy="50" r="40"/>
base.svg
<radialGradient id="gradient">
  <stop offset="0%" stop-color="green" />
</radialGradient>
paint.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11
Chrome and Safari don't load remote paint servers, even if they are from the same origin. Interrestingly enough, Chrome fallback to transparent where Safari and IE11 fallback to black for rendering the element.

Using local graphic elements

All these tests check how browsers handle <use> with local references

Local graphic: fill attribute

We use a local graphic element colored with a fill attribute

<defs>
  <circle id="circle"
    cx="50" cy="50" r="40"
    fill="green" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local graphic: fill attribute (with a paint server)

We use a local graphic element with a fill attribute referencing a paint server

<defs>
  <radialGradient id="gradient">
    <stop offset="0%" stop-color="green" />
  </radialGradient>

  <circle id="circle"
    cx="50" cy="50" r="40"
    fill="url(#gradient)" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local graphic: fill property

We use a local graphic element colored with a CSS fill property

<style>
  circle {
    fill: green;
  }
</style>

<defs>
  <circle id="circle"
    cx="50" cy="50" r="40" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local graphic: fill property (with a paint server)

We use a local graphic element colored with a CSS fill property referencing a paint server

<style>
  circle {
    fill: url(#gradient);
  }
</style>

<defs>
  <radialGradient id="gradient">
    <stop offset="0%" stop-color="green" />
  </radialGradient>

  <circle id="circle"
    cx="50" cy="50" r="40" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Using remote graphic elements

All these tests check how browsers handle <use> with remote references

Remote graphic: fill attribute

We use a remote graphic element colored with a fill attribute

<use xlink:href="graphic.svg#circle" />
base.svg
<circle id="circle"
  cx="50" cy="50" r="40"
fill="green" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote graphic: fill attribute (with a paint server)

We use a remote graphic element colored with a fill attribute referencing a paint server

<use xlink:href="graphic.svg#circle" />
base.svg
<radialGradient id="gradient">
  <stop offset="0%" stop-color="green" />
</radialGradient>

<circle id="circle"
  cx="50" cy="50" r="40"
fill="url(#gradient)" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote graphic: fill attribute (with a paint server embedded within the shadow tree)

We use a remote graphic element colored with a fill attribute referencing a paint server

<use xlink:href="graphic.svg#circle" />
base.svg
<g id="circle">
  <radialGradient id="gradient">
    <stop offset="0%" stop-color="green" />
  </radialGradient>

  <circle
    cx="50" cy="50" r="40"
  fill="url(#gradient)" />
</g>
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote graphic: CSS fill property

We use a remote graphic element colored with a CSS fill property

<use xlink:href="graphic.svg#circle" />
base.svg
<style>
  circle {
    fill: green;
  }
</style>

<circle id="circle"
  cx="50" cy="50" r="40" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote graphic: CSS fill property (with a paint server)

We use a remote graphic element colored with a CSS fill property referencing a paint server

<use xlink:href="graphic.svg#circle" />
base.svg
<radialGradient id="gradient">
  <stop offset="0%" stop-color="green" />
</radialGradient>

<style>
  circle {
    fill: url(#gradient);
  }
</style>

<circle id="circle"
  cx="50" cy="50" r="40" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

This test raises the same questions as the previous one.

Remote graphic: embedded CSS fill property (with a paint server)

We use a remote graphic element colored with a CSS fill property referencing a paint server, both being embedded within the <use> Shadow tree.

<use xlink:href="graphic.svg#circle" />
base.svg
<g id="circle">
  <radialGradient id="gradient">
    <stop offset="0%" stop-color="green" />
  </radialGradient>

  <style>
    circle {
      fill: url(#gradient);
    }
  </style>

  <circle
    cx="50" cy="50" r="40" />
</g>
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Overloading local style with <use>

All these tests check how browsers handle style overload with <use> on local references

Local use overload: fill attribute vs. nothing

We test if the fill attribute on a <use> element is applied on a duplicated local element without any fill definition.

<defs>
  <circle id="circle"
    cx="50" cy="50" r="40" />
</defs>

<use xlink:href="#circle"
  fill="green" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local use overload: fill attribute vs. fill attribute

We test if the fill attribute on a <use> element is not applied on a duplicated local element with its own fill attribute

<defs>
  <circle id="circle"
    cx="50" cy="50" r="40"
    fill="green" />
</defs>

<use xlink:href="#circle"
  fill="red" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local use overload: fill attribute vs. fill property

We test if the fill attribute on a <use> element is not applied on a duplicated local element styled with a fill property

<style>
  circle {
    fill: green;
  }
</style>

<defs>
  <circle  id="circle"
    cx="50" cy="50" r="40" />
</defs>

<use xlink:href="#circle"
  fill="red" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local use overload: fill property vs. nothing

We test if the CSS fill property applied to a <use> element is also applied on a duplicated local element without any fill definition

<style>
  use {
    fill: green;
  }
</style>

</defs>
  <circle id="circle"
    cx="50" cy="50" r="40" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local use overload: fill property vs. fill attribute

We test if the CSS fill property applied to a <use> element is not applied on a duplicated local element without a fill attribute

<style>
  use {
    fill: red;
  }
</style>

</defs>
  <circle id="circle"
    cx="50" cy="50" r="40"
    fill="green" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Local use overload: fill property vs. fill property

We test if the CSS fill property applied to a <use> element is not applied on a duplicated local element styled with another CSS fill property

<style>
  circle {
    fill: green;
  }

  use {
    fill: red;
  }
</style>

</defs>
  <circle id="circle"
    cx="50" cy="50" r="40" />
</defs>

<use xlink:href="#circle" />
base.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Overloading remote style with <use>

All these tests check how browsers handle style overload with <use> on remote references

Remote use overload: fill attribute vs. nothing

We test if the fill attribute on a <use> element is applied on a duplicated remote element without any fill definition.

<use xlink:href="graphic.svg#circle"
  fill="green" />
base.svg
<circle id="circle"
  cx="50" cy="50" r="40" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote use overload: fill attribute vs. fill attribute

We test if the fill attribute on a <use> element is not applied on a duplicated remote element with its own fill attribute

<use xlink:href="graphic.svg#circle"
  fill="red" />
base.svg
<circle id="circle"
  cx="50" cy="50" r="40"
  fill="green" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote use overload: fill attribute vs. fill property

We test if the fill attribute on a <use> element is applied on a duplicated remote element styled with a fill property

<use xlink:href="graphic.svg#circle"
  fill="green" />
base.svg
<style>
  circle {
    fill: red;
  }
</style>

<circle id="circle"
  cx="50" cy="50" r="40" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote use overload: fill attribute vs. embedded fill property

We test if the fill attribute on a <use> element is not applied on a duplicated remote element styled with a fill property part of the Shadow tree

<use xlink:href="graphic.svg#circle"
  fill="red" />
base.svg
<g id="circle">
  <style>
    circle {
      fill: green;
    }
  </style>

  <circle
    cx="50" cy="50" r="40" />
</g>
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote use overload: fill property vs. nothing

We test if the CSS fill property applied to a <use> element is also applied on a duplicated remote element without any fill definition

<style>
  use {
    fill: green;
  }
</style>

<use xlink:href="#circle" />
base.svg
<circle id="circle"
  cx="50" cy="50" r="40" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote use overload: fill property vs. fill attribute

We test if the CSS fill property applied to a <use> element is not applied on a duplicated remote element without a fill attribute

<style>
  use {
    fill: red;
  }
</style>

<use xlink:href="#circle" />
base.svg
<circle id="circle"
  cx="50" cy="50" r="40"
  fill="green" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11

Remote use overload: fill property vs. fill property

We test if the CSS fill property applied to a <use> element is not applied on a duplicated remote element styled with another CSS fill property

<style>
  use {
    fill: green;
  }
</style>

<use xlink:href="#circle" />
base.svg
<style>
  circle {
    fill: red;
  }
</style>

<circle id="circle"
  cx="50" cy="50" r="40" />
graphic.svg
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11