Related
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:
I'm trying to create an SVG sprite that can be used both as bg and as inline svg via .
The following SVG mostly works:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- symbols: used for inline SVGs via <use> -->
<symbol id="tsg-en-logo" viewBox="0 0 100 11.1">
<path fill="#0CA8D0" d="M0,2h1..."/>
</symbol>
<symbol id="chevron-down" viewBox="0 0 200 123.9">
<g fill="#0CA8D0">
<path d="M49..."/>
</g>
</symbol>
<!-- views: used for bg images -->
<view xmlns="http://www.w3.org/2000/svg" id="tsg-en-logo-bg" width="100" height="11.1" viewBox="0 0 100 11.1"/>
<view xmlns="http://www.w3.org/2000/svg" id="chevron-down-bg" width="200" height="123.9" viewBox="0 12 200 123.9"/>
<!-- uses: shown when acceses directly on the browser -->
<use xlink:href="#tsg-en-logo" x="0" y="0" width="100" height="11.1" id="u-tsg-en-logo"></use>
<use xlink:href="#chevron-down" x="0" y="12" width="200" height="123.9" id="u-chevron-down"></use>
</svg>
The problem is that when used as a BG, macOS Safari looses the proportions.
See full SVG here: https://cdn.rawgit.com/42pe/7a3a0193d3a142e7d93601340e6ee8fc/raw/81a7b0598b7179bdc071bba87569d53e2a7651e7/test.svg
And working fiddle: https://jsfiddle.net/42pe/Lragjqef/1/
Any idea why or how to fix? This works fine on Chrome, Firefox, IE11 and Edge!
SVG icon on chrome looks very weird, especially the instagram one - on zoom you can see all the weird edges. Does anyone have any idea of how to fix it?
Here is the code for the icon:
<div id="instagram">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" class="icon">
<path fill="black" class="social_instagram" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
<path class="circle" fill="white" d="M12,8.4c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6s3.6-1.6,3.6-3.6S14,8.4,12,8.4z M12,14.3c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3s2.3,1,2.3,2.3S13.3,14.3,12,14.3z M15.7,9.1c-0.5,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8C16.6,8.7,16.2,9.1,15.7,9.1z M19,9.1c-0.1-2.5-1.5-4-4.1-4.1c-0.7,0-1,0-2.9,0S9.9,5,9.1,5C6.6,5.2,5.2,6.6,5,9.1c0,0.7,0,1,0,2.9s0,2.1,0,2.9c0.1,2.5,1.5,4,4.1,4.1c0.7,0,1,0,2.9,0s2.1,0,2.9,0c2.5-0.1,4-1.5,4.1-4.1c0-0.7,0-1,0-2.9S19,9.9,19,9.1z M17.7,14.8c-0.1,1.9-1,2.8-2.9,2.9c-0.7,0-1,0-2.8,0c-1.9,0-2.1,0-2.8,0c-1.9-0.1-2.8-1-2.9-2.9c0-0.7,0-1,0-2.8s0-2.1,0-2.8c0.1-1.9,1-2.8,2.9-2.9c0.7,0,1,0,2.8,0s2.1,0,2.8,0c1.9,0.1,2.8,1,2.9,2.9c0,0.7,0,1,0,2.8S17.7,14.1,17.7,14.8z"/>
</svg>
</div>
It looks like your circle is really just a square with some vectors that bend the corners. This may be why Chrome is rendering it differently than you'd like. Instead of using path to draw your circle, use circle instead.
<circle cx="12" cy="12" r="12" fill="black" class="social_instagram"/>
Hi, I was wondering how one would go about animating an svg arrow like above (on hover).
I have tried playing around with CSS transforms, but they also scale the arrow-head which is no good. I assume the correct way to do this is using SVGs animations, but I don't know where to start.
For example I would the following arrow (line only) to grow and arrow head to move accordingly.
<svg width="600px" height="100px">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>
Any help is very much appreciated!
You can create growing arrow by using "respoinsive" SVG like this.
svg{
width: 20px;
height: 20px;
transition:width 2s ease;
overflow: visible;
}
svg:hover{
width: 100px;
}
<svg>
<defs>
<marker id="m" markerWidth="4" markerHeight="8"
refX="0" refY="1" viewBox="0 0 1 2">
<polygon points="0,0 1,1 0,2" fill="black"/>
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"
stroke-width="2" marker-end="url(#m)" stroke="black"/>
</svg>
There are some points to implement.
svg has no viewBox (so it is "responsive" SVG).
Line of arrow is defined by relative position of (root) svg size.
Arrow head is defined by marker element.
Growing animation is defined by CSS transition which animate width of svg. So, arrow grows with svg size.
In order to animate the individual SVG elements like HTML elements, you'll need to embed the SVG directly into the page like 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="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
xml:space="preserve" class="logo">
<ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
C434.693,207.929,439.613,203.01,445.731,203.01z"/>
<filter id="pictureFilter" >
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>
After doing this, you can use CSS animations on any of the individual SVG elements, just like HTML elements. For example, you could do the following:
svg ellipse { animate: grow 3s infinite; }
Without having the exact SVG code for your arrow, I can't give you more specific direction than that, but can point you in the direction of this article: https://css-tricks.com/using-svg/
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.