This project has moved and is read-only. For the latest updates, please go here.

How to include CSS file or style tag in svg file

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

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.

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.
Nov 17, 2016 at 1:35 PM

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" 
<svg xmlns="" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
    <style type="text/css"><![CDATA[
      rect {
        fill: red;
        stroke: blue;
        stroke-width: 3
  <rect x="200" y="100" width="600" height="300"/>
Try it and let me know the results. I will also look into the support of standalone CSS files.

Best regards,
Nov 21, 2016 at 8: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;" />