Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Transitions and Transforms Fill and Stroke Transitions

Andrew Dickens
Andrew Dickens
18,352 Points
Posted by Andrew Dickens
Andrew Dickens
18,352 Points

How does Guil's css override .svg inline style??

Yo... in this svg video, https://teamtreehouse.com/library/animating-svg-with-css/transitions-and-transforms/transitioning-svg-properties

Guil adds some CSS class's to target elements in the .svg, but as far as I remember and trying this out myself inline styles will override CSS class or ID styles so nothing happens

Basically: how do i get my CSS classes to override the inline styles of an svg?

here in my xmas tree svg I have added the class .tree-fill to the <polygon> bit 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <title>tree</title>
  <g id="664c83e5-1884-442b-a1c7-265609a3ca34" data-name="Layer 2">
    <g id="ee85935d-78c9-46b0-9841-f8c19cf0304e" data-name="tree">
      <g>
        <polygon class="tree-fill" points="45.5 36.5 39.31 36.5 45.5 45.5 34.5 45.5 34.5 55.5 28.5 55.5 28.5 45.5 17.5 45.5 23.6 36.5 17.5 36.5 21.91 30 17.5 30 31.39 9.5 45.5 30 41.03 30 45.5 36.5" style="fill: #39b54a"/>
        <path d="M35.5,56.5h-8v-10H15.61l6.1-9h-6.1L20,31H15.61L31.38,7.73,47.4,31H42.93l4.47,6.5H41.21l6.19,9H35.5Zm-6-2h4v-10H43.6l-6.19-9H43.6L39.13,29H43.6L31.4,11.27,19.39,29H23.8l-4.41,6.5h6.1l-6.1,9H29.5Z"/>
        <rect x="34.5" y="31.5" width="2" height="2"/>
        <rect x="35.5" y="24.5" width="2" height="2"/>
        <rect x="34.5" y="39.5" width="2" height="2"/>
        <rect x="25.5" y="22.5" width="2" height="2"/>
        <rect x="28.5" y="30.5" width="2" height="2"/>
        <rect x="24.5" y="39.5" width="2" height="2"/>
        <rect x="30.5" y="16.5" width="2" height="2"/>
        <rect width="64" height="64" style="fill: none"/>
      </g>
    </g>
  </g>
</svg>

greta so now when I target it in my css I can change the color

.tree-fill{
       fill: yellow;
}

WRONG... doesn't work because the inline style overrides the css

SO how does Guil do it???

6 Answers

Andrew Dickens
Andrew Dickens
18,352 Points
Andrew Dickens
Andrew Dickens
18,352 Points

Hi Jacob Illustrator CC offers about 5 different ways to export, kind of helpful but each way has different degrees of settings The best way to achieve the same svg code as Guil's is

file --> save as --> chose svg as format --> now in a new window click more options --> Advanced Options --> CSS properties --> choose 'Presentation Attributes'

Here's my xmas tree again

<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"
     viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
    <polygon fill="#39B54A" points="46,37 39.8,37 46,46 35,46 35,56 29,56 29,46 18,46 24.1,37 18,37 22.4,30.5 18,30.5 31.9,10 
        46,30.5 41.5,30.5   "/>
    <path d="M36,57h-8V47H16.1l6.1-9h-6.1l4.4-6.5h-4.4L31.9,8.2l16,23.3h-4.5l4.5,6.5h-6.2l6.2,9H36V57z M30,55h4V45h10.1l-6.2-9h6.2
        l-4.5-6.5h4.5L31.9,11.8l-12,17.7h4.4L19.9,36H26l-6.1,9H30V55z"/>
    <rect x="35" y="32" width="2" height="2"/>
    <rect x="36" y="25" width="2" height="2"/>
    <rect x="35" y="40" width="2" height="2"/>
    <rect x="26" y="23" width="2" height="2"/>
    <rect x="29" y="31" width="2" height="2"/>
    <rect x="25" y="40" width="2" height="2"/>
    <rect x="31" y="17" width="2" height="2"/>
    <rect x="0.5" y="0.5" fill="none" width="64" height="64"/>
</g>
</svg>

Hurray....

Also if you chose CSS properties --> style element , it will out put some ready made style class's which you can cut and paste into your CSS stylesheet

<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"
     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#39B54A;}
    .st1{fill:none;}
</style>
<g>
    <polygon class="st0" points="46,37 39.8,37 46,46 35,46 35,56 29,56 29,46 18,46 24.1,37 18,37 22.4,30.5 18,30.5 31.9,10 46,30.5 
        41.5,30.5   "/>
    <path d="M36,57h-8V47H16.1l6.1-9h-6.1l4.4-6.5h-4.4L31.9,8.2l16,23.3h-4.5l4.5,6.5h-6.2l6.2,9H36V57z M30,55h4V45h10.1l-6.2-9h6.2
        l-4.5-6.5h4.5L31.9,11.8l-12,17.7h4.4L19.9,36H26l-6.1,9H30V55z"/>
    <rect x="35" y="32" width="2" height="2"/>
    <rect x="36" y="25" width="2" height="2"/>
    <rect x="35" y="40" width="2" height="2"/>
    <rect x="26" y="23" width="2" height="2"/>
    <rect x="29" y="31" width="2" height="2"/>
    <rect x="25" y="40" width="2" height="2"/>
    <rect x="31" y="17" width="2" height="2"/>
    <rect x="0.5" y="0.5" class="st1" width="64" height="64"/>
</g>
</svg>
Jacob Mishkin
Jacob Mishkin
23,117 Points

That's awesome. I use Sketch, mostly because of the price. Illustrator does have some nice perks.

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

Hey, @Andrew Dickens, I know what you're saying. I got that same thing stuck in my head for a long time. Well, it's not inline styling if you remember correctly. Inline styling is something like this, <p style="color:red">an inline style</p> whereas the fill color in question is not written like that at all, it goes something like: <circle fill="whatever color">A way svg work</circle>

Hope this clears up....

Andrew Dickens
Andrew Dickens
18,352 Points
Andrew Dickens
Andrew Dickens
18,352 Points

Yes Nafis, that is correct, if you use adobe illustrator (like me) it can sometime add some inline style that you don't want

Illustrator CC offers about 5 different ways to export, kind of helpful but each way has different degrees of settings The best way to achieve the same svg code as Guil's is

file --> save as --> chose svg as format --> now in a new window click more options --> Advanced Options --> CSS properties --> choose 'Presentation Attributes'

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

You can delete the inline style. This could be just a matter of style, but unless you are dynamically adding to the HTML I would never have inline styles present. They should always be in the CSS.

Andrew Dickens
Andrew Dickens
18,352 Points
Andrew Dickens
Andrew Dickens
18,352 Points

Well done Jacob but that's not the question I'm asking

Jacob Mishkin
Jacob Mishkin
23,117 Points

Please look at the difference between the code. 

style="fill: #39b54a"/> <! this is your code for your polygon-->

<circle class="gear-bg" fill="#39ADD1" cx="200" cy="50" r="90" /><!-- this is the Guil's code for the gears -->

As you can see you are using inline styles where Guil is stating the fill inside the SVG. It's the natural color of the SVG not styled.

Andrew Dickens
Andrew Dickens
18,352 Points
Andrew Dickens
Andrew Dickens
18,352 Points

Jacob thanks for that I guess the problem I'm having is using adobe illustrator, when exporting .svg it always places fill/stroke etc in an inline style="" Which sort of sucks if you have to go back and edit the svg code manually?

Jacob Mishkin
Jacob Mishkin
23,117 Points

I don't use adobe anymore, So i'm not sure. There should be a set of settings maybe when you export the SVG. you will need to look into that. If you can't find it I would delete the inline styles, then set everything in your CSS.

Side note also be on the lookout for any transform styles as that will make it very difficult to animate the SVG as well.