title: Is it possible to get the contents of an external css file using javascript to add to an svg file?
body: <p>I need to get the contents of an external css file in order to add it to an svg.</p>
  
  <p>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.</p>
  
  <p>Here is the solution xml I'm looking for for the svg : </p>
  
  <pre><code> &lt;?xml version="1.0" standalone="no"?&gt;
      &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
           width="10cm" height="5cm" viewBox="0 0 1000 500"&gt;
        &lt;defs&gt;
          &lt;style type="text/css"&gt;&lt;![CDATA[
            rect {
              fill: red;
              stroke: blue;
              stroke-width: 3
            }
          ]]&gt;&lt;/style&gt;
        &lt;/defs&gt;
        &lt;rect x="200" y="100" width="600" height="300"/&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p>I tried using an external link to it but it didn't render the styles : </p>
  
  <pre><code>&lt;?xml version="1.0" standalone="no"?&gt;
  &lt;?xml-stylesheet href="mystyle.css" type="text/css"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="10cm" height="5cm" viewBox="0 0 1000 500"&gt;
    &lt;rect x="200" y="100" width="600" height="300"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Edit : I should have added this origionally</strong>
  I have the svg rendering fine within the browser as it has access to the svg.</p>
  
  <p>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.</p>