Svg: Why Does External CSS Override Inline Style for Text

SVG: why does external css override inline style for text?

Because in SVG, like HTML before it, styles trump attribute styling.

fill="red" below is NOT an "inline style", style="fill:green" IS an inline style.

<svg width="400" height="400">
  <text x="50" y="50" fill="red" style="fill:green">This will be green</text>
</svg>

How to style SVG with external CSS?

Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......."/>
    </g>
  </svg>
</html>

If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.

You can do it with a style tag:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!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="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.

If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.

SVG: Use Attributes or CSS to style?

I would generally prefer <circle fill="yellow" /> to <circle style="fill: yellow;" /> because it's shorter and easily to manipulate with, for example, getAttributeNS(null, "fill").

But over that I would prefer using a separate style element, just as with HTML, e.g:

  <style>
    circle{
      fill: yellow;
    }
  </style>

Which has all the same advantages of using CSS, such as making it easy to change the stlye of lots of elements at once.

You can also put your CSS in an external file and add:

<?xml-stylesheet type="text/css" href="your_CSS.css" ?>

Before the svg element.

Css Overwrite issue - Change the scope of external styles

Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this

.leftbar {
  float: left;
  width: 20%;
  background: #ccc;
}

a { /*think of this as default link style*/
  color: black;
}

#main div:not(.product-desc) a {  /*more specific selector*/
  display: block;
  color: red;
}

a { /*this one is from eBay*/
  color: green;
}

<div id='main'>
  <div class='leftbar'>
    <a>Hello</a>
    <a>World</a>
  </div>
  <div class='product-desc'>
    <a>Description</a>
    <a>Product</a>
  </div>
</div>

Override inline img CSS, with inline CSS on container div

You can add a small style block inline (fiddle here):

<style type="text/css">
    div img {
        width: 120px !important;
    }
</style>
<div>
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
        style="width:320px"/>
</div>

You probably would want want to add an ID to the div and the style rule to prevent unwanted effects in the rest of your page.

Update

If style elements cannot be used, you could try the following, using a CSS transform (fiddle here):

<div style="display: inline-block;
            transform: translate(-100px, -30px) scale(0.375, 0.375);">
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
           style="width:320px"/>
</div>

Now, your mileage will obviously vary depending on the level of CSS3 support in the mail client's rendering engines.

Svg: Why Does External CSS Override Inline Style for Text