I have an svg that represents a bar in a graph.
<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 8 98" preserveAspectRatio="none" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M7.5,93.541C7.5,95.727,5.933,97.5,4,97.5l0,0
c-1.933,0-3.5-1.773-3.5-3.959V4.459C0.5,2.272,2.067,0.5,4,0.5l0,0c1.933,0,3.5,1.772,3.5,3.959V93.541z"/>
</svg>
Is there a way to design the svg (viewbox, proportions, etc.) for it shrink to different sizes (within reason) that would protect the rounded corners and general look? I effectively want it to slice away the middle to meet the desired size leaving a shorter but recognizable bar. Default scaling does this:
When I use a <svg> in order to display an icon, it looks perfectly crisp and sharp in Google Chrome. However, as soon as I open the svg in Firefox or Internet Explorer, the icon looks blurry.
It seems like those Browsers render the icon to half pixels. Only Google Chrome is doing a good job here.
What is the best approach to get crisp svg icons in all browsers? (We want to color the icons via fill:... so using a background-image or pixel graphics are no options)
What I have tried so far:
I have applied the CSS attribute shape-rendering. but this one is too crisp and edgy.
<svg width="16px" height="16px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
</i></button>
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
Hack for Firefox:
svg {
transform: translateZ(0);
}
What about IE:
possible reason when svg container positioned in coordinates like 31.5 (not exactly on pixel line), IE will draw svg in this container the same way, a bit off pixel line.
Use much larger values for width and height.
What you are doing at the moment is essentially specifying a 24 x 16 pixel image, and expanding it to full screen size. SVG should be infinitely scalable, hence the name, but some Browsers, like some TVs are better at pixel interpolation than others.
If I embed an SVG sprite
<svg class="hidden-svg" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="208px" height="104px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve" >
<g id="phone2">
.....
</g>
</svg>
and reference an embedded icon as follows:
<svg viewBox="1 1 32 32" class="icon">
<use xlink:href="#phone2"></use>
</svg>
If is set the SVG sprite to:
.hidden-svg {
display: none;
}
It changes the look of my icon. See jsbin here.
What can I do to avoid changing the icon?
Use visibility:hidden instead of display:none and make the original SVG width="0" and height="0" so that it doesn't take up space.
I've seen lots of people posting this, and they all seem pretty happy with their answers.
However I cant get my path fill to actually work,
http://jsfiddle.net/OwenMelbz/LvgmV/
The fiddle is above, the svg is generated from Illustrator
HTML
<img src="http://owenmelbourne.com/arrow.svg">
CSS
img {width: 100px}
path {
fill: blue;
}
Yet I always get
The SVG Code looks like
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
If anybody could shed some light on the matter it would be much appreciated.
Thanks
Changing the fill attribute will never work in this situation, because the image itself already has a fill. It won't be 'replaced' or 'redrawn' using the new attributes.
I also don't think this will work even if you took out the color command in the SVG file.
There's two ways to get it done.
Delete the value inside the fill attribute (fill="") and modify it via external CSS
Just change the color value inside the fill attribute.
And just to keep it nice, delete all the extra g tags, you don't need them.
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
Once you have no value for the fill attribute, change the color with CSS.
<style>
svg{ fill: red; }
</style>
Or the second option...
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#ff0000" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
This will make it red.
Try both on your fiddle and use the one the best works for You.
Tadaaa
CSS fills, and other SVG-specific rules, won't apply to an SVG rendered with an <img> tag:
// CSS fills won't apply to this
<img src="image.svg">
You need the SVG to be rendered inline in order for CSS fills to work.
// CSS fills will apply to this
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
CSS:
#Layer_1 {
fill: blue;
}
Also, you could also use Javascript to automatically convert SVG's into inline elements. However if you're dealing with a few static SVG's for an interface (e.g. your theme), it's best to just copy-paste them inline.
I found that when the CSS3 Zoom is applied on small SVG icons (9px:9px with zoom: 1.5), the SVG icons could be blurry. Any idea to get a sharp and clean icon in this case? Thanks in advance.
The SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
<g>
<g fill="none" transform="translate(0.5, 0.5)">
<g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
<line x1="2" y1="4" x2="6" y2="4"/>
<line x1="4" y1="2" x2="4" y2="6"/>
</g>
<g stroke="#909090" stroke-width="1" stroke-linecap="square" >
<rect x="0" y="0" width="8" height="8"/>
</g>
</g>
</g>
</svg>
Got a solution myself. The trick is adding:
shape-rendering="crispEdges"
to the SVG elements.
From Mozilla MDN:
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
See the difference on jsFilddle.