2

I've been following a "how to create a website" video on youtube and at one point the guy saves an svg file as an html, and links it into the main index.html file using the following:

<div class="logo">{% include icons/logo.html %}</div>

When I tried this, the logo doesn't appear and is replaced by the text "{% include icons/logo.html %}

I'm couldn't get this to work, so I used an img tag and a object tag to link the svg file. Now the svg loads fine in the browser, but I am trying to style it using css to no avail. I have used the following to try changing the fill:

.logo object path {
             fill: rgba(0, 0, 0, 0.4);
}

This isn't working either. I can always just change it using opacity - but preferably would like to understand what I'm doing wrong, so I'd be grateful if someone could help out.

Thanks!

Weardian
  • 211
  • 4
  • 13
  • Have you read any of the exising questions/answers on this topic such as http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg – Robert Longson Oct 15 '14 at 11:23
  • Hi, yes but I didn't completely get it. I didn't understand why you would add a stylesheet to the svg file when you can enter the svg file and edit the fill from there. Also, in the video I am watching the guy manages to edit the style of the svg from his main stylesheet. Sorry if you think my question is just interwebz bum fluff. I know it must be jarring to see lots of similar questions, but I'm just starting out so coding can get quite confusing quite quickly for me. – Weardian Oct 15 '14 at 11:32
  • Can you post a jsfiddle of your html/svg/css. – Ian Oct 15 '14 at 15:53
  • Oops.. hit enter. Here is the jsfiddle. I've not used it before so I couldn't get the images working (they are on my computer and don't have a url), but hopefully it shows what I've been trying to do. The logo svg in question is in the top left of the browser. Thanks http://jsfiddle.net/1qyk07nd/ – Weardian Oct 16 '14 at 07:41

0 Answers0