CSS binding in SVG, embedded with IMG tag

Question

CSS binding in SVG, embedded with IMG tag

I have a page containing several SVG files. To synchronize the style of these SVG files, I wanted to create a single stylesheet to store all the style information.

However, if you enable SVG as shown below, CSS will not be applied. Anyone who has a solution, or simply impossible to link to other (CSS) files in the SVG referenced by <img src="..." /> ?

See sample code below. When pic.svg loaded directly in the browser, all styles are applied, and you can see the green rectangle. But when opening page.htm all you need to see is a black rectangle. Thus, it is obvious that none of the specific styles have been applied.

page.htm

 <!DOCTYPE html> <html> <body> <img src="pic.svg" style="width: 100px; height: 100px;" /> </body> </html>

pic.svg

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <?xml-stylesheet type="text/css" href="styles.css" ?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" > <rect x="10" y="10" width="80" height="80" /> </svg>

styles.css

 rect { stroke: black; fill: green; }

EDIT

From the answer that I appeared here for a short time, I got this link to the specification and the following quote. In my opinion, this suggests that the above code should work!

Standalone SVG document embedded in an HTML or XML document with img, (HTML) or image (SVG) elements
[...]
Quoting from your link “Style sheets defined anywhere in the SVG document referenced (in style elements or style attributes, or in external style sheets associated with instructions for processing style sheets ) the entire SVG document but does not affect the referenced document (possibly HTML or XHTML). "

+16

html css svg

Sirko Sep 25 '12 at 13:22

source share

3 answers

David Kerr · Answer 1 · 2013-08-23 09:24

An alternative is to use the <object> in your html: -

 <object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

This BIG shame on the <img> tag will not work. I do not want to interfere with the hacking process with converting SVG to data URI. This is due to cross-site vulnerabilities in indirect resource loading and the use of "Open Redirector".

Note that in my testing last week, the <img> tag method works in IE10, but neither Chrome nor FireFox.

I don't know why <object> allowed, but <img> is not. Supervision?

Robert Longson · Answer 2 · 2012-09-25 15:09

For privacy reasons, images should be separate files. You can use CSS if you code the stylesheet as uri of data. For example.

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" > <rect x="10" y="10" width="80" height="80" /> </svg>

There are various online converters for data URIs.

duhaime · Answer 3 · 2018-06-18 19:00

The answers above are wonderful. However, it seemed to me that it was easy to simply embed my own SVG tag on my webpage. This allowed SVG to inherit the font styles declared in my CSS page without any problems ...

CSS binding in SVG, embedded with IMG tag

More articles: