How to include CSS file or style tag in svg file

Topics: Samples and Test Suite, Styling, SVG
Nov 11, 2016 at 12:15 AM
Hi,

I tried to use below sample to convert SVG file to image. Great. It works, but it seems that the style tag doesn't be embedded.

https://sharpvectors.codeplex.com/SourceControl/latest#Samples/SharpVectorsSamples/ImageSvgConverterSampleVB/MainModule.vb

Is there any methods or any one can provide some hints for embedding the style tag content or CSS file into the SVG? so that the exported image can be displayed properly. Thanks.
Coordinator
Nov 17, 2016 at 12:35 PM
Hello,

The embedded CSS is done using the style tag per the specifications.
<?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">
<svg xmlns="http://www.w3.org/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>
Try it and let me know the results. I will also look into the support of standalone CSS files.

Best regards,
Paul
Nov 21, 2016 at 7:46 AM
Thanks Paul. It's work. ^^

However, I found that "opacity" style cannot be applied to objects in group. Is it not support at the moment?
    <g style="opacity: 0.5;" >
        <rect width="1000" height="150" style="fill:red;" />
    </g>