CODEWITHSUNDEEP
javascripthtmlcsssvg
Inception
Inception

Reputation: 57

How to include css file into a svg file without html

I have a svg file and I use javascript to draw the image in a canvas using DrawImage function. I'm wondering if I can use an external css file in my svg file. I can't find anything about using an external css file without embeded or without using the svg file as image.

I found that, but it didn't work.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="453.96px" height="660.7px" viewBox="0 0 453.96 660.7" enable-background="new 0 0 453.96 660.7" xml:space="preserve">

<g id="Wind">
....
</g>

#Wind{
  fill: blue;
  width: 100px;
  color:blue;
}

Upvotes: 3

Views: 99

Answers (1)

enxaneta
enxaneta

Reputation: 33024

I am using something like this:

 <svg . . . . >
  <style type="text/css">
        <![CDATA[
        circle {
          fill: red;
        }
        ]]> 
  </style>
  <circle . . . . />
  </svg>

External css file using @import

 <svg . . . .>
  <style>
        @charset "UTF-8";
        @import url(estilosSVG.css);
        rect{fill:#6ab150;}
      </style>
      <rect .../>
  </svg>

If you don't want to use @import:

<?xml-stylesheet type="text/css" href="style.css" ?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  ...................................

The DOCTYPE part is optional.

Upvotes: 1

Related Questions