SVG: How to reduce repeated objects that only differ in style? - svg
I'm drawing a complex path twice with different transformations and styles. The first time as an outline with no fill and the second time as a fill with no outline with a different transformation.
Below is the SVG code. Note that the paths are the same. Only the style and transformations are different. Is there a way to optimise this so that I only need to define the path once? I was looking for a way to define a variable that I could use twice but couldn't find anything.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="300">
<g opacity="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z" transform="translate(210 150) rotate(6.093) scale(5.22 5.22) translate(0,-14.551)" style="stroke:rgb(255,0,0);stroke-opacity:0.6;stroke-width:1.2;fill:none"/>
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z" transform="translate(20 162) rotate(-6.093) scale(5.22 5.22) translate(0,-14.551)" style="stroke:none;fill-opacity:0.5;fill:rgb(0,0,0)"/>
</g>
</svg>
I have solved this using the <use> element as suggested in the comments. <defs> is used when defining the path to prevent it being drawn.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="300">
<defs>
<g id='path1' stroke-linecap="round" stroke-linejoin="round" transform="scale(5.22) translate(0,-14.551)">
<path d="M0,14.316L5.498,0H7.539L13.398,14.316H11.24L9.57,9.98H3.584L2.012,14.316ZM4.131,8.438H8.984L7.49,4.473C7.035,3.268,6.696,2.279,6.475,1.504C6.292,2.422,6.035,3.333,5.703,4.238ZM16.309,14.316H14.678V0H16.436V5.107C17.178,4.176,18.125,3.711,19.277,3.711C19.915,3.711,20.519,3.84,21.089,4.097C21.659,4.354,22.127,4.715,22.495,5.181C22.863,5.646,23.151,6.208,23.359,6.865C23.568,7.523,23.672,8.226,23.672,8.975C23.672,10.752,23.232,12.126,22.354,13.096C21.475,14.066,20.42,14.551,19.189,14.551C17.965,14.551,17.005,14.04,16.309,13.018ZM16.289,9.053C16.289,10.296,16.458,11.195,16.797,11.748C17.35,12.653,18.099,13.105,19.043,13.105C19.811,13.105,20.475,12.772,21.035,12.104C21.595,11.437,21.875,10.443,21.875,9.121C21.875,7.767,21.606,6.768,21.069,6.123C20.532,5.479,19.883,5.156,19.121,5.156C18.353,5.156,17.689,5.49,17.129,6.157C16.569,6.825,16.289,7.79,16.289,9.053ZM32.578,10.518L34.307,10.742C34.118,11.934,33.634,12.866,32.856,13.54C32.078,14.214,31.123,14.551,29.99,14.551C28.571,14.551,27.43,14.087,26.567,13.159C25.705,12.231,25.273,10.902,25.273,9.17C25.273,8.05,25.459,7.07,25.83,6.23C26.201,5.391,26.766,4.761,27.524,4.341C28.283,3.921,29.108,3.711,30,3.711C31.126,3.711,32.048,3.996,32.764,4.565C33.48,5.135,33.939,5.944,34.141,6.992L32.432,7.256C32.269,6.559,31.981,6.035,31.567,5.684C31.154,5.332,30.654,5.156,30.068,5.156C29.183,5.156,28.464,5.474,27.91,6.108C27.357,6.743,27.08,7.747,27.08,9.121C27.08,10.514,27.347,11.527,27.881,12.158C28.415,12.79,29.111,13.105,29.971,13.105C30.661,13.105,31.237,12.894,31.699,12.471C32.161,12.048,32.454,11.396,32.578,10.518Z"/>
</g>
</defs>
<use xlink:href="#path1" transform="translate(210 150) rotate(6.093)" style="stroke:rgb(255,0,0);stroke-opacity:0.6;stroke-width:1.2;fill:none"/>
<use xlink:href="#path1" transform="translate(20 162) rotate(-6.093)" style="stroke:none;fill-opacity:0.5;fill:rgb(0,0,0)"/>
</svg>
Related
Responsive full width svg logo
So I have this logo that fits the whole page. Is there anyway that, when the browser is resized I can move these paths? That way the height stays the same? Example of what I want to achieve Here's my svg code <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 1440 52" style="enable-background:new 0 0 1440 52;" xml:space="preserve"> <path d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1H16.3V3.1H7.8v46.8h8.5V30.7h1384.5v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" /> </svg>
you can do something like this by using preserveAspectRatio="none" for the svg element together with a fixed height and width:100%. This would give tou what you need but the the stroke would be scaled differently on the vertical and horizontal.
To fix it you need to add vector-effect="non-scaling-stroke" for the path.
svg{height:100px; width:100%}
<svg viewBox="0 0 100 20" preserveAspectRatio="none">
<path stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M 1,5V15M1,10H97"/>
</svg>
Yes it is possible, with a bit of trickery. Below is a modified verion of your SVG that behaves how you want.
This matches your SVG exactly, but has a limitation. The trick we are using relies on extending the middle bar a long way to the left. Then covering up the left end of the bar with your vertical piece. But in your original SVG the vertical piece is not right at the left end of your SVG. So I've had to hide some of the extension with a white rectangle. This assumes your background will also be white. If it isn't you'll need to change that white rectangle to be the same colour as your page background.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
<rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>
If you want to get a better idea how the trick works, have a look at this version. I've modified the SVG to make the trick more apparent.
svg {
background-color: red;
overflow: visible;
}
rect {
opacity: 0.5;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
<rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>
However if you don't mind the vertical piece on the left end being moved so it's hard up against the left side of the SVG, then we can remove that restriction regarding the background. The new version below will work for any page background colour.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
<defs>
<path id="middle-and-right" transform="translate(-1440 0)"
d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
h -3000 v 8.4 h 3000
v19.1h0h9.4V30.6h7.5 c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
</defs>
<use xlink:href="#middle-and-right" x="100%"/>
<rect x="0" y="3.1" width="8.5" height="46.8"/>
</svg>
SMIL animation of skillbars
I've been searching for hours and hours and I just don't comprehend how I cannot find a solution to animate skillbars in SMIL. So I've got an SVG composed of two paths, one for the outter border and the other for the fill and I want to animate the fill onload of the page to start at 0 and reach its final width or position after a given amount of time (say 800ms). Have a look at the HTML: https://codepen.io/anon/pen/PaOqrr <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796" enable-background="new 0.626 346.31 226.762 13.796" xml:space="preserve"> <path fill="#4A929D" d="M159.155,353.208c0,3.536-2.868,6.398-6.398,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0 c0-3.531,2.865-6.397,6.397-6.397h145.233C156.289,346.81,159.155,349.676,159.155,353.208L159.155,353.208z"/> <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> I really want to achieve this only with SMIL. I know how to do with JS and CSS but I can't believe this won't work with animate. I have tried the attribute "x" and "width" but it doesn't budge. Any idea?
Paths don't have a x or width attribute, so animating those won't do anything. There are several ways to achieve what you want. But the simplest would probably be use a mask or a clip path to define the area between the dots and then animate the position of your progress bar. You would start with it off to the left (ie not visible through the clip) and then slowly move it to the right, so that it appears to grow in length. Your current bar only covers about two thirds of our progress. So we can't really use it. Scaling or moving it won't help us. So we might as well discard it. However we can use the dots path, as that matches what we need. If we copy the path definition across, we get the following: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796"> <path fill="#4A929D" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> </svg> We can now animate the progress bar by animating the transform of that path. We use a translate() transform to move it from left to right by an appropriate amount. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796"> <path fill="#4A929D" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-226, 0" to="0, 0" dur="3s" fill="freeze"/> </path> <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> </svg> Now moving it alone is not enough. We need to hide the part of the moving bar that is outside our channel of dots. We can do that by applying a <mask> or a <clipPath>. I'm going to use a clip path. Since the clip path will be the same shape as the progress bar path, and the dots path, we will use the same definition. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796"> <defs> <clipPath id="bar-clip"> <path d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> </clipPath> </defs> <g clip-path="url(#bar-clip)"> <path fill="#4A929D" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-226, 0" to="0, 0" dur="3s" fill="freeze"/> </path> </g> <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> </svg> When you look at the above, you may wonder why we applied the clip to a group (<g>) rather than directly to the progress bar path itself. The reason is because, if we apply it to the path, it will be affected by the animated transform. It will move with the path, and so no clipping will happen. Finally, we are using the same path three times here. You may wonder if we can do anything to make the file smaller. The answer is yes. We can define the path just once, then refer to it everywhere else it is needed. We can do that by using the <use> element. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796"> <defs> <clipPath id="bar-clip"> <path id="bar-shape" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/> </clipPath> </defs> <g clip-path="url(#bar-clip)"> <use xlink:href="#bar-shape" fill="#4A929D"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-226, 0" to="0, 0" dur="3s" fill="freeze"/> </use> </g> <use xlink:href="#bar-shape" fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"/> </svg>
Grouping several SVG's into one object
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"/>.
How do I perfectly center a single character inside an SVG circle?
I'd like to place a single character, perfectly centered, inside this circle: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100" height="100"> <g> <circle style="fill:#eeeeee" cx="50" cy="50" r="50"> </circle> <text>C</text> </g> </svg> Ideally, the solution works for any single ASCII character. Thanks for the help!
Use a combination of text-anchor="middle" to centre the text horizontally, and dominant-baseline="central" to centre it vertically. To simplify things, I've added a transform attribute to your <g> element to move the origin to the middle of your canvas. <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <g transform="translate(50,50)"> <circle style="fill:#eeeeee" r="50" /> <text text-anchor="middle" dominant-baseline="central">C</text> </g> </svg>
Make SVG element transparent (like a mask)
How can I use the polygon as a mask, which will make the area in the circle transparent? I cannot manage it <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50"/> </svg>
Masks are quite simple. They are described here: http://www.w3.org/TR/SVG11/masking.html#Masking In your case, it is just a matter of adding a few lines. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" mask="url(#hole)"/> <mask id="hole"> <rect x="0" y="0" width="100" height="100" fill="white"/> <polygon points="20,30 25,20 80,40 80,60 25,80, 20,70 70,50" fill="black"/> </mask> </svg> In the mask definition, we have to add a white rectangle the size of the circle to make the <circle> visible (white means opaque), and we make the <polygon> black (transparent) to create the hole. Fiddle here
I'd say try using Inkscape to make an SVG file, draw your items on each other, select them both and use the Path->Exclusion menu to do so. Save your file and then you can look at the code of the .svg file to see what it did.