New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 14 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Apr 2015
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug

Sign in to add a comment

SVG inserted using either CSS background-image or img element ignores external CSS

Reported by, Aug 11 2012

Issue description

Chrome Version       : 21.0.1180.75 m
URLs (if applicable) :
Other browsers tested:
   Firefox 14: FAIL
         IE 9: OK

What steps will reproduce the problem?
1. Create SVG file (circle_extcss.svg) with external CSS file referred by "xml-stylesheet":
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="svg.css" type="text/css"?>    
<svg viewBox="0 0 100 100"
  xmlns:svg="" xmlns="">
  <circle cx="50" cy="50" r="40" stroke="black" /> 
2. Create CSS file (svg.css) for the SVG file:
circle {
  fill: green;
3. Create (X)HTML file (circles.html) and insert the SVG using either CSS background-image property or img element.
<div style='background-image: url('circle.svg');'></div>

What is the expected result?
The circle should be green, because it should be affected by external CSS file.

What happens instead?
Circle is black, because external CSS is ignored.

SVG with eternal CSS works well if it is inserted using object, iframe or embed element. I have tested also SVG with internal CSS -- it works well even if SVG is inserted using CSS background-image property or img element.
399 bytes Download
2.0 KB Download
31 bytes View Download
276 bytes Download

Comment 1 Deleted

I can confirm this issue on Chromium.

Other browsers tested:
    Opera: OK
Labels: -Area-Undefined Area-WebKit WebKit-CSS
Also detected the problem, which has been well described above.
This function would be greatly suitable for using dynamic styled vector graphics with raster fallback with the same css files. 

Any chance someone would be so kind and have a look at this?

Comment 6 by, Feb 13 2013

Thank you for reporting this bug. Do you know if this is spec'ed somewhere? I'm not sure svg-as-image should be using stylesheets from the page.
I completely fail to see why it should _not_ be using them. With the current situation, SVGs will simply _not render correctly_.
There might be a misunderstanding here. An svg can already link to separate css files according to this specification:

But in the case of displaying it via the background-image property, the linked style sheet has no effect on the svg rendering. The reporter has created very specific examples to present this problem.
pdr (#6): Thanks for dealing with this issue. The case is not about "svg-as-image should be using stylesheets from the page". It is about "svg-as-img and svg-as-background-image should be using external stylesheets defined in the svg document". This mechanism is described in the SVG specification (follow the link in #8).
Labels: WEBKIT-ID-15443
Currently, SVGs embedded as image does not support loading *any* subresources:

There are some technical reasons (hard to make the current architecture play nice with the resource loading subsystem) but I believe the main concern is privacy/security. FF allows loading of data-URI-embedded subresources only, for the same reason - see Robert Longson's comment here:


Project Member

Comment 11 by, Feb 14 2013

Labels: -WEBKIT-ID-15443 WebKit-ID-15443-NEW

Project Member

Comment 12 by, Mar 10 2013

Labels: -Area-WebKit -WebKit-SVG -WebKit-CSS Cr-Content Cr-Content-CSS Cr-Content-SVG
Project Member

Comment 13 by, Apr 6 2013

Labels: -Cr-Content Cr-Blink
Project Member

Comment 14 by, Apr 6 2013

Labels: -Cr-Content-SVG Cr-Blink-SVG
Project Member

Comment 15 by, Apr 6 2013

Labels: -Cr-Content-CSS Cr-Blink-CSS
Status: WontFix
Behavior here appears to remain consistent with Firefox.

There's an explanation of why subresources are not loaded in comment #28 here:
 Issue 399621  has been merged into this issue.

Sign in to add a comment