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 trialAndrew Dickens
18,352 PointsHow 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
18,352 PointsHi 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>
nfs
35,526 PointsHey, @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
18,352 PointsYes 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
23,118 PointsYou 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
18,352 PointsWell done Jacob but that's not the question I'm asking
Jacob Mishkin
23,118 PointsPlease 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
18,352 Pointscheers
Andrew Dickens
18,352 PointsJacob 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
23,118 PointsI 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.
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 PointsThat's awesome. I use Sketch, mostly because of the price. Illustrator does have some nice perks.