Is it possible to get the contents of an external css file using javascript to add to an svg file? - Stack Overflow

I need to get the contents of an external css file in order to add it to an svg.

What I'm looking for is in effect a toString method for the css. Is this possible? I haven't been able to find a solution yet.

Here is the solution xml I'm looking for for the svg :

 <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      ".1/DTD/svg11.dtd">
    <svg xmlns="" version="1.1"
         width="10cm" height="5cm" viewBox="0 0 1000 500">
      <defs>
        <style type="text/css"><![CDATA[
          rect {
            fill: red;
            stroke: blue;
            stroke-width: 3
          }
        ]]></style>
      </defs>
      <rect x="200" y="100" width="600" height="300"/>
    </svg>

I tried using an external link to it but it didn't render the styles :

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  ".1/DTD/svg11.dtd">
<svg xmlns="" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

Edit : I should have added this origionally I have the svg rendering fine within the browser as it has access to the svg.

What I need to do is send the svg to a server for further processing (convert format, save to database..). The problem is that the style is lost as the css is not included in the svg xml. I need to add the css to the svg itself like the first block of code above so I can keep the stylings.

I need to get the contents of an external css file in order to add it to an svg.

What I'm looking for is in effect a toString method for the css. Is this possible? I haven't been able to find a solution yet.

Here is the solution xml I'm looking for for the svg :

 <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3/2000/svg" version="1.1"
         width="10cm" height="5cm" viewBox="0 0 1000 500">
      <defs>
        <style type="text/css"><![CDATA[
          rect {
            fill: red;
            stroke: blue;
            stroke-width: 3
          }
        ]]></style>
      </defs>
      <rect x="200" y="100" width="600" height="300"/>
    </svg>

I tried using an external link to it but it didn't render the styles :

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

Edit : I should have added this origionally I have the svg rendering fine within the browser as it has access to the svg.

What I need to do is send the svg to a server for further processing (convert format, save to database..). The problem is that the style is lost as the css is not included in the svg xml. I need to add the css to the svg itself like the first block of code above so I can keep the stylings.

• javascript
• css
• svg

Share Improve this question Follow edited Jun 28, 2013 at 9:54 Travis asked Jun 28, 2013 at 9:37 TravisTravis 70577 silver badges3030 bronze badges 3

• use ajax and then get the style? – gmaliar Commented Jun 28, 2013 at 9:42
• The external link should work provided you serve it with the correct mime type. – Robert Longson Commented Jun 28, 2013 at 9:50
• Are you already able to retrive the content of the css file and you only don't know how to extract the specific part? is the external css of the same domain? – t.niese Commented Jun 28, 2013 at 9:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you are able to use JavaScript you can get the contents of your stylesheet as follows:

[].slice.call(document.styleSheets[1].cssRules).forEach(function(rule){
  console.log('rule:', rule.cssText)
})

Where document.styleSheets[1] is your stylesheet.