Greetings people.

I am working on a HTML5 front-end template mostly for educational purposes as I do a little teaching from time to time.

The template is HTML5/CSS3 only (no IE8 compatibility or vendor-prefix css required)

Unfortunately I have encountered a bit of a problem when trying to nest a SVG in an image tag. The problem is that IE10 renders the image with the fixed dimensions that the image was saved with rather than the fluid % dimensions specified in the CSS. If have not added width and height attributes to the img tag and I even tried to open the SVG in a text editor to remove the width and height data from the file header. But nothing seams to work. The HTML markup as well as the CSS3 is 100% valid with W3 standards.

 

Here is my link:

http://www.nielsharbo.dk/test/frontend-template/

 

The SVG in question is the logo in the header.

 

MARKUP:

    <header class="mainHeader clearfix">
            <div class="logo left padding">
                <img src="img/logotype.svg" alt="Responsive and Semantic web"/> <!-- THE SVG IN QUESTION-->
            </div>
            <div class="headerOptions right padding">
                <form class="searchForm clearfix">
                    <input class="searchInput" name="searchInput" type="text" value="Search" onclick="this.value=''"/>
                    <button class="searchBtn" type="submit">
                        <img src="img/search.png" alt="Search" />
                    </button>
                </form>
            </div>
    </header>

CSS:

.logo{
    width: 40%;
    max-width: 280px;
    margin: 0;
    padding: 0.5rem 2% 0 0;
}
.logo img{
    width: 100%;
    max-width: 240px;   
}

Everything looks like it should in FF and Chrome.

I know there are other ways to embed SVG but I'm sure it must be possible to assign width and height with css in a way that IE recognizes. I hope someone can help, Thank you

Edited September 29, 201411 yr by Nillervision

looks like <object> might be the best solution ?

 

using the image tag "In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file."

 

huh link disappeared

 

http://www.sitepoint.com/add-svg-to-web-page/

 

 

e.g. http://gekkoweb.com/stuff/svg1.html

works in my emulated ie9 in developer tools in IE11

Edited September 30, 201411 yr by davep

looks like <object> might be the best solution ?

 

using the image tag "In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file."

 

huh link disappeared

 

http://www.sitepoint.com/add-svg-to-web-page/

 

 

e.g. http://gekkoweb.com/stuff/svg1.html

works in my emulated ie9 in developer tools in IE11

Thanks. I have been considering the object tag but as I'm trying to make the template as semantic as possible I wonder if it is the right choice as object tags does not have alt attributes. Would alternative content placed within an object tag have the same "semantic weight" as the alt attribute of the img tag?

not sure then whether you could use something like this with alt attribute but then you may or may not have an additional dl.

http://css-tricks.com/svg-fallbacks/

 

i've still not used svg in a production site or even my own portfolio site one day soon perhaps. i just remembered reading some stuff on css tricks and making a quick demo when i had a slow day at work, when i used to have a job that is

You could try to open the image in your text editor and remove any width and height dimensions that might be present in the code, I've only recently started playing with SVG myself and not had any issues with IE (apart from using an external sprite!). Have you tried putting the code directly into the document itself, it can still be sementic as you can give the svg a title and so on and a good thing is you save on a http request and you can style the individual paths. Nice

 

 

Edit I'm having the same issue too. I'll let you know if I find a solution.

Edited October 5, 201411 yr by rbrtsmith

Ok I've got it working on mine.

 

This is what worked for me: I put them in a wapper that has a width, can be fixed or fluid.

then I put the SVG inside and gave it a width of 100%. I don't understand why this works yet, it's kinda weird but it's working.

 

http://wasabiadmin.se/trustweaver/page-about-management/

Ok I've got it working on mine.

 

This is what worked for me: I put them in a wapper that has a width, can be fixed or fluid.

then I put the SVG inside and gave it a width of 100%. I don't understand why this works yet, it's kinda weird but it's working.

 

http://wasabiadmin.se/trustweaver/page-about-management/

That is strange. It's exactly what I have done:

/*The SVG WRAPPER DIV*/
.logo{
    width: 40%;
    max-width: 280px;
    margin: 0;
    padding: 0.5rem 2% 0 0;
}
/*THE SVG INSIDE*/
.logo img{
    width: 100%;
    max-width: 240px;   
}

Stil I get this result in IE10:

The weird thing I I don't see much sbout this on StackOverflow. I just tried a bunch of different things until something worked I hope we can find the cause and the ACTUAL solution to this.

 

Maybe because your max-width is not matching that of the container, you could put in an element between the .logo and the svg, give that a width of 100% and max-width of 240, then the svg itself just a width of 100% and height: auto.

 

I'm still getting weird things where I attempt to remove any whitespace around an svg icon in illustrator, save it, but then once I reopen it the whitespace has re-appeared. I want all my viewboxes to match the bounds of the icons!!

Edited October 6, 201411 yr by rbrtsmith

@rbrt - are you setting your artboards to artworks bounds in illi? and is i then reappearing? opening the svg in illi shows a generous margin ...

I'm getting similar issues in Safari now.

@@davep I'm not sure exactly what you mean, I'm pretty new to illustrator!

The weird thing I I don't see much sbout this on StackOverflow. I just tried a bunch of different things until something worked I hope we can find the cause and the ACTUAL solution to this.

 

Maybe because your max-width is not matching that of the container, you could put in an element between the .logo and the svg, give that a width of 100% and max-width of 240, then the svg itself just a width of 100% and height: auto.

 

I'm still getting weird things where I attempt to remove any whitespace around an svg icon in illustrator, save it, but then once I reopen it the whitespace has re-appeared. I want all my viewboxes to match the bounds of the icons!!

Thank you so much for trying to help me with this wierd problem. Here's a fiddle with the problem cooked down to the essentials (no max-width propperties or media queries) Still the same wierd behaviour in IE.

 

Fiddle: http://jsfiddle.net/Nillervision/5xqqxhn5/

Edited October 6, 201411 yr by Nillervision

@rbrt like this http://gekkoweb.com/stuff/artboard.png

 

Nils - will look at your jsfiddle ...

I fixed the safri issue - again there was whitespace around the image and in illustrator i went in the artbard > presets > Fit To Artboard bounds.

 

But this doesn't seem to work on every image.

FIgugured this much out. The problem is in the svg file.

I tried to change the src attribute to another svg and it works:

http://jsfiddle.net/Nillervision/5xqqxhn5/5/

 

EDIT: Only problem is I'm not sure where the stored width/height values are in my original file I tried to remove these two lines from the header in the svg file:

 width="402"
 height="201.55145"

You would think that would be it but NO

The file was created with. Inkscape I will try to create the shapes in another program and submit a bug report to Inkscape

Edited October 6, 201411 yr by Nillervision

I don't this this is a CSS issue. You're missing a parameter called viewBox.

 

At the top:

 

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.2"

width="402"

height="201.55145"

id="svg2987">

Should be:

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.2"

width="402"

height="201.55145"

viewBox="0 0 402 201.55145"

id="svg2987">

 

I don't this this is a CSS issue. You're missing a parameter called viewBox.

 

At the top:

 

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.2"

width="402"

height="201.55145"

id="svg2987">

Should be:

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.2"

width="402"

height="201.55145"

viewBox="0 0 402 201.55145"

id="svg2987">

 

Excellent. Thank you. :)

I was getting these issues with the viewbox still there.

 

What difference does it make if we leave in the width and height attributes? would we be best removing them?

Is this working now?

 

The viewBox attribute was missing when I viewed the file. I couldn't test it too much, being at work and all.

Sorry I've been working on my own files, not on Nillvervisions. Just was pointing out I've been having similar issues on some of my projects. I need to spend sometime and get more accustomed with Illustrator. I think my issues were caused by whitespace in the files. - or a viewbox that is larger than the path / polygon.

I'm also having some issues styling my svs, If I give a classname to a path why can't I style that.

<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 85.3 612 707.4" id="icon-facebook">
    <title>icon-facebook</title>
    <polygon points="612,615.8 306.1,792.7 0,615.8 0,262.2 306.1,85.3 612,262.2 " />
    <g>
      <path class="facebook-path" d="M222.9,457.1c0-18,0-36.2,0-54.3c2.5-0.8,5-2.2,7.4-2.2c11.6-0.2,23-0.1,35-0.1c0-7-0.2-13.2,0.1-19.5
		c0.6-10.6,1.1-21.3,2.5-32c1.8-13.7,8.5-25.5,18.4-34.6c12.6-11.6,28-17.2,45.5-16.7c13,0.4,25.9,0.1,38.9,0.1
		c6.6,0,7.9,1.2,7.9,7.8c0.1,13.2,0,26.3,0,39.5c0,7.1-1.2,8-8.1,8.3c-10.1,0.2-20.3,0.5-30.4,1.3c-5.7,0.5-11,3.4-11.6,9.6
		c-1.3,11.9-1.7,23.9-2.5,36.3c15.1,0,28.9,0.1,42.6-0.1c5.4-0.1,7.8,1.7,7.7,7.4c-0.2,14.7-0.2,29.5,0,44.2c0.1,5.7-2,7.8-7.7,7.5
		c-6.7-0.4-13.3-0.1-20.1-0.1c-7.2,0-14.4,0-21.9,0c0,2.8,0,5,0,7.1c0,36.6,0,73.1,0,109.7c0,7.9-0.5,8.3-8.5,8.3
		c-14.2,0-28.3,0-42.5,0c-8.7,0-10.4-1.8-10.4-10.7c0-36,0-71.9,0-107.9c0-2.1,0-4.1,0-6.5c-12.3,0-23.6,0.1-35-0.1
		C227.9,459.3,225.4,457.9,222.9,457.1z" />
    </g>
  </symbol>
</svg>

.facebook-path {
fill: green;
}

The fill doesn't work, but when I put a fill color directly on the path itself inside the SVG file then that fill appears but I can't seem to get it to work through css, very wierd.

Edited October 6, 201411 yr by rbrtsmith

I'm pretty sure you can only style SVG's that are embedded in your html directly. If you're using an <object> or <img> tag, then I don't think the CSS will apply.

It is embedded directly, I'm using an svg sprite that gets embedded at the top of my document styled to display none then I can access it later in the document using the id of that particular symbol. This part is working just fine it keeps the http requests down and stops my document being polluted with 100 lines of svg in between my elements.

<svg class="svg-icon__svg svg-icon--social__svg">

<use xlink:href="#icon-facebook"></use>

</svg>

 

This is why I'm puzzled as to why it won't allow me to style it. The fill colour for the whole svg works just fine:

.svg-icon--social__svg {
fill: red
}

but when I try to style one of the paths within the symbol it wont work unless the fill color is added directly to the svg code.

 

Edited October 6, 201411 yr by rbrtsmith

It is embedded directly, I'm using an svg sprite that gets embedded at the top of my document styled to display none then I can access it later in the document using the id of that particular symbol. This part is working just fine it keeps the http requests down and stops my document being polluted with 100 lines of svg in between my elements.

<svg class="svg-icon__svg svg-icon--social__svg">

<use xlink:href="#icon-facebook"></use>

</svg>

 

This is why I'm puzzled as to why it won't allow me to style it. The fill colour for the whole svg works just fine:

.svg-icon--social__svg {
fill: red
}

but when I try to style one of the paths within the symbol it wont work unless the fill color is added directly to the svg code.

 

 

If your paths are inside an external file, you have to place the CSS inside of that file. External stylesheets are tricky, if it can't directly access the SVG then it won't apply the style. Since you're hiding stuff, I'm not 100% sure what the output looks like, It's all guesswork at the moment. Could you paste a demo into pastebin or something?

Here a pen,

Weird its working in the pen, but not in my project

 

http://codepen.io/anon/pen/ACKnG

Here a pen,

Weird its working in the pen, but not in my project

 

http://codepen.io/anon/pen/ACKnG

 

That's because Codepen adds your CSS inline, not externally. Your external stylesheet can't access the paths inside of the hidden SVG at the top. You could either place a fill directly on the path, using inline CSS, or by adding inline CSS inside the <svg> file.

Figured it out, it was an issue in my sass, it was being compiled as .svg-img .fill-this {} I accidently had it nested within .svg-img{}

 

Thanks for you help

Ah-ha. Nice. Now I know you can use external stylesheets, double-win.

Now that is solved I can't get the hover effect working - I would like the fill-color of the blue path to change colour when I hover the icon Updated pen - http://codepen.io/anon/pen/ACKnG

I just wanted to inform other inkscape users that might read this that the problem with the missing viewbox attribute on exported SVG files allready has been reported. Hopefully it will be fixed in future versions. For now you will have to add the viewbox manually in a text-editor like Jack explained.

As well according to Chris Coyier who's done a lot of research into SVG: for web use you can remove a lot of the header tags. This is the one that is required

<svg xmlns="http://www.w3.org/2000/svg">
You can also throw a title tag in the markup to give a little more semantic meaning.

 

Chris has a whole series on SVG in the lodge section of his website http://www.css-tricks.com

 

However, I have still not figured out why my hover state isn't working :/

However, I have still not figured out why my hover state isn't working :/

Neither have I. This could be one for Stack Overflow.