I'm using grunt-svgstore in my grunt set up to create a svg sprite file from svg I add to my project.
The output is something like this.
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
At the top of my document I'm adding a reference to the svg file.
<?php include_once("images/svg/processed/svg-defs.svg"); ?>
Whats the best way or how do I show the svg on the page. I'm trying things like this.
<object type="image/svg+xml" width="100" height="100" data="#times-Icons"></object>
To can reference a <symbol> element with a <use> element.
You should include the SVG with the symbols at the top of your document. Actually it could go anywhere, but I believe Safari has a bug which requires the definitions to be before the references to them.
You will need to hide the symbol definition SVG so it is not visible. To do that can either use display="none" or set width="0" height="0".
Then to reference the symbol, create another SVG of the desired size with a <use> element.
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
You can set the size explicitly as above, or use CSS as in the following example.
.large {
width: 40px;
height: 40px;
}
.small {
width: 24px;
height: 24px;
}
<svg xmlns="http://www.w3.org/2000/svg" display="none"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch --> <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>
<svg width="40px" height="40px">
<use xlink:href="#shape-times"/>
</svg>
<svg class="large">
<use xlink:href="#shape-times"/>
</svg>
<svg class="small">
<use xlink:href="#shape-times"/>
</svg>
Related
I'm trying to create a filter for only the stroke of path in SVG, but the feImage keeps getting clipped to what I assume is that bounding box (see green rectangle below in code as bounding box). I've tried setting the filter's x/y and width/height to all sorts of positions/sizes, as seems to be the prevailing advice, but nothing works. x/y just offset the feImage and width/height of greater than 100% has no effect.
I won't know in advance if the stroke or fill is solid or something else (like linearGradient.
The below demonstrates what I'm looking to do - just get the stroke of a shape (regardless of size or fill) and apply a filter to it for all modern browsers.
Notes: FF doesn't even display the left-hand feImage. Chrome clips the left and top. Edge clips all 4 sides.
<html>
<body>
<svg width="960" height="540" >
<rect width="960" height="540" stroke="#385D8A" fill="white" stroke-width="3"/>
<svg name="BoundingBox1" class="rect" x="100" y="100" overflow="visible" fill="none" stroke="#00ff00" stroke-width="1">
<path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" />
</svg>
<!-- BELOW IS MODIFIED "SPEECH" SHAPE. NEED A FILTER ON THE STROKE ONLY. -->
<svg name="Speech-strokeonly" x="100" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="strokeOnly" fill="none"/>
<filter id="effs0sp9" color-interpolation-filters="sRGB" x="0" y="0">
<feImage xlink:href="#strokeOnly" />
</filter>
</defs>
<path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" filter="url(#effs0sp9)" overflow="visible" />
<text y="160" stroke="black" stroke-width="0.2">this is the one that has undesirable clipping of</text>
<text y="178" stroke="black" stroke-width="0.2">of stroke in Chrome/Edge. Doesn't appear at all in FF</text>
</svg>
<!-- BELOW IS ORIGINAL WITH BOTH FILL AND STROKE -->
<svg name="BoundingBox2" x="400" y="100" overflow="visible" fill="none" stroke="green" stroke-width="1">
<path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" />
</svg>
<svg name="Speech-original" x="400" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12">
<path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" />
<text y="-22" stroke="black" stroke-width="0.2">this is the original one</text>
<text y="-6" stroke="black" stroke-width="0.2">that I just want the stroke as feImage from</text>
</svg>
</svg>
</body>
</html>
Is there a way to grab the whole stroke of a shape only and use in a filter?
I understand that I could simply swap one image for another on hover, or I could move the position of a sprite as a background, but is there any way I can change the fill of the svg on hover in some other way?
I originally thought the below would work but have discovered it does not work if the SVG is used as the src of an html image tag.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#Page-1:hover #Shape{
fill: #00A49E !important;
}
</style>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop" transform="translate(-454.000000, -1073.000000)" fill-rule="nonzero" fill="#9B9B9B">
<g id="email" transform="translate(454.000000, 1073.000000)">
<g id="Group">
<g id="Shape">
<path d="M22.2254762,0 C23.2055186,0 24,0.797143779 24,1.78716696 L24,15.212833 C24,16.1998581 23.2014771,17 22.2254762,17 L1.77452382,17 C0.794481378,17 0,16.2028562 0,15.212833 L0,1.78716696 C0,0.800141908 0.798522933,0 1.77452382,0 L22.2254762,0 Z M10.6054162,9.87197556 L2.12964982,3.11784921 C1.93425396,2.96214312 1.77777778,3.0378817 1.77777778,3.28512523 L1.77777778,14.7628523 C1.77777778,15.0060917 1.97746978,15.2105263 2.22380231,15.2105263 L21.7761977,15.2105263 C22.0198764,15.2105263 22.2222222,15.0100958 22.2222222,14.7628523 L22.2222222,3.28512523 C22.2222222,3.04188583 22.0646837,2.96298968 21.8703502,3.11784921 L13.3945838,9.87197556 C12.624058,10.4859884 11.3756236,10.4857346 10.6054162,9.87197556 Z M12.3507416,8.42142877 L20.3224534,2.06897091 C20.5152517,1.91533479 20.473415,1.78947368 20.2269738,1.78947368 L3.77302622,1.78947368 C3.52161302,1.78947368 3.48383733,1.91460885 3.67754658,2.06897091 L11.6492584,8.42142877 C11.8420567,8.57506489 12.1570324,8.57579083 12.3507416,8.42142877 Z"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
How is this done?
Code:
https://jsfiddle.net/p1rwuzf8/1/
This pattern svg when repeated.
https://i.imgur.com/sTACtMT.png
Should look like this.
https://i.imgur.com/E68BQFo.png
svg {
background-repeat: repeat;
}
<svg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
One way of doing this would be using the image as background-image. For this you would need first to encode the svg image, for example using this tool: SVG encoder
div{width:200px;
height:300px;
border:1px solid;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
<div></div>
An other way of doing it would be using SVG patterns. For this you need to take the group used to draw the "brick" and use it in a pattern like so:
<svg width="200" height="300" viewBox="0 0 200 300">
<defs>
<pattern id="brick" width='42' height='44' patternUnits='userSpaceOnUse'> >
<g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#brick)"></rect>
</svg>
I have an arrow SVG, set up like this one:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 100 100" class="arrow">
<g class="tail">
<circle (...)></circle>
</g>
<g class="body">
<rect (...)></rect>
</g>
<g class="head">
<polygon (...)>
</g>
</svg>
And I want to set it up so that when resizing it via CSS, regardless of its size,
the tail will remain in the left hand side with the same proportions,
the head will stay in the right hand side, also with the same proportions, and
the body will stretch horizontally indefinitely.
Can I do that? How can I do that?
Basically, you can create such SVG graphics by using nested svg elements with relative positioning (%value of root svg element's size), like this.
svg{
overflow:visible;
}
svg.root{
width:200px;
height:100px;
margin:0 10px;
background-color:rgba(255,255,0,.5);
transition: 1s ease-in-out 0s;
}
svg.root:hover{
width:300px;
height:150px;
}
<svg class="root">
<svg class="tail" y="50%">
<circle r="10" fill="red"/>
</svg>
<svg class="head" x="100%" y="50%">
<polygon points="-10,-10 10,0 -10,10" fill="blue"/>
</svg>
<svg class="body" y="50%">
<rect x="0" y="-2" width="100%" height="4" fill="green"/>
</svg>
</svg>
I'm trying to reuse an SVG sprite icone into new SVG object.
The new object is just a circle that contains the icon from the sprite.
I understand that I need to use the defs tag to group some shapes together,
But i have have a problem referencing my sprite icone inside the defs tag.
sprite:
<svg style="display:none;">
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol >
new object:
<svg><defs>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<image x="0" y="0" xlink:href="#icon_1"></image>
</g>
I read that i can use image tags to reference SVG elements.
obviously i'm doing something wrong.
Basically the expected result should be a stroked circle with the icon inside
in a way that I will be able to animate the entire object
Thanks
You were close. Your main problem was that you were careless with your opening and closing tags.
Your second SVG had a stray opening <defs> element, which meant that the <g id="shape"> element was left inside the <defs> section. <defs> is for defining elements to be re-used later, and anything in a <defs> will only be drawn when referenced from elsewhere.
There were a couple of other problems.
You can't use an <image> to reference a symbol. You will need to use a <use> for that.
You will need to supply a width and height so that the symbol gets draw at an appropriate size.
<svg width="0" height="0">
<defs>
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol>
</defs>
</svg>
new object:
<svg>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<use x="0" y="0" width="80" height="80" xlink:href="#icon_1"></use>
</g>
</svg>
The image tag is designed to be used with complete images, not fractions. I guess that use is the right tag for your use case.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<symbol id="icon_1" viewBox="0 0 54 54">
<path d="M10.6 29.3h14.5V44H10.6z" class="st0"/>
<path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/>
</symbol>
<defs>
<g id="shape">
<circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" />
<use x="2" y="-3" width="80" height="80" xlink:href="#icon_1"/>
</g>
</defs>
<use xlink:href="#shape"/>
</svg>
Also, if the sprite is in a separate file, you have to reference the symbol within that file: <use hlink:href="sprites.svg#icon1"/>.