How can I create a diamond using <svg> element? - html

I am trying to create a diamond using <svg> and <polygon> HTML5 elements. I specified the points, but it is not being filled as a diamond; instead it is being filled as a pair of triangles. Here's my approach:
<div>
<svg width="2000" height="2000">
<polygon points="25 25, 75 25, 50 50, 50 0" style=" fill: blue; stroke:black;"/>
</svg>
</div>


I hope you enjoy
<svg width="2000" height="2000">
<polygon points="0 40,40 80,80 40,40 0" style=" fill: blue; stroke:black;"/>
</svg>


As mr dqhendricks said in the comments above it would be better if you use the icons in the bootstrap icons library
or you can change your code to
<polygon fill="none" stroke-width="3" points="69.445,125 125,28.774 180.556,125
125,221.227 " style=" fill: blue; stroke:black;"/>
And it will give you a diamond shape

Related

Question for CSS specialists, css input:checked and embeded svg as href [duplicate]

I have this code below.
.icon {stroke-width: 0; stroke: currentColor; fill: currentColor;}
a {color: red}
a:hover {color: pink}
a:hover circle {fill: green !important; color: orange}
a:hover path {fill: blue !important}
<svg class="icon team"><use xlink:href="#team"></use></svg>
...
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle fill="#ccc" cx="103.3" cy="12.2" r="12.1"/>
<path fill="#000" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path fill="#553" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle fill="f00" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>
It's SVG file with more colored layers and I want to set different color to each layer on hover.
I tried to remove fill="..." in HTML markup, tried to remove fill attribute, add class/id to SVG layers set color, fill in CSS.
But no result, I'm able to change just one color to all layers which haven't fill attribute, or have fill="currentColor" in HTML.
Any ideas? Thanks.

Maybe with some CSS variables. You cannot target elements inside the use but you can rely on inheritance to pass some values.
.icon {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
a {
color: red
}
a:hover {
color: pink;
--s1:green;
--s2:blue;
--p1:purple;
--p2:yellow;
}
<svg class="icon team"><use xlink:href="#team"></use></svg>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle style="fill:var(--s1,#ccc)" cx="103.3" cy="12.2" r="12.1"/>
<path style="fill:var(--p1,#000)" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path style="fill:var(--p2,#553)" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle style="fill:var(--s2,#f00)" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>

(Answer below posted based on this marked-as-a-duplicate question, not the above question.)
I decide to write my SVG markup as if <use...> didn't impose a shadow DOM barrier on the content being used, then got rid of the shadow DOM like this:
private removeSignalMeterShadowRoots(): void {
const signalMeter = $('#signal-meter');
const markup = signalMeter.html();
const uses = $('use[href="#signal-meter"]');
uses.parent().html(markup);
}
...with signal-meter being the id of a symbol I wanted to re-use multiple times, while freely applying CSS classes for styling both colors and other attributes as if the shadow DOM weren't there.
This same code could be easily adapted to automatically handle multiple symbols or all symbols.

How to avoid repetitious SVG code, but without shadow DOM problems caused by defs/symbol/use? [duplicate]

I have this code below.
.icon {stroke-width: 0; stroke: currentColor; fill: currentColor;}
a {color: red}
a:hover {color: pink}
a:hover circle {fill: green !important; color: orange}
a:hover path {fill: blue !important}
<svg class="icon team"><use xlink:href="#team"></use></svg>
...
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle fill="#ccc" cx="103.3" cy="12.2" r="12.1"/>
<path fill="#000" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path fill="#553" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle fill="f00" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>
It's SVG file with more colored layers and I want to set different color to each layer on hover.
I tried to remove fill="..." in HTML markup, tried to remove fill attribute, add class/id to SVG layers set color, fill in CSS.
But no result, I'm able to change just one color to all layers which haven't fill attribute, or have fill="currentColor" in HTML.
Any ideas? Thanks.

Maybe with some CSS variables. You cannot target elements inside the use but you can rely on inheritance to pass some values.
.icon {
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
a {
color: red
}
a:hover {
color: pink;
--s1:green;
--s2:blue;
--p1:purple;
--p2:yellow;
}
<svg class="icon team"><use xlink:href="#team"></use></svg>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle style="fill:var(--s1,#ccc)" cx="103.3" cy="12.2" r="12.1"/>
<path style="fill:var(--p1,#000)" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path style="fill:var(--p2,#553)" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle style="fill:var(--s2,#f00)" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>

(Answer below posted based on this marked-as-a-duplicate question, not the above question.)
I decide to write my SVG markup as if <use...> didn't impose a shadow DOM barrier on the content being used, then got rid of the shadow DOM like this:
private removeSignalMeterShadowRoots(): void {
const signalMeter = $('#signal-meter');
const markup = signalMeter.html();
const uses = $('use[href="#signal-meter"]');
uses.parent().html(markup);
}
...with signal-meter being the id of a symbol I wanted to re-use multiple times, while freely applying CSS classes for styling both colors and other attributes as if the shadow DOM weren't there.
This same code could be easily adapted to automatically handle multiple symbols or all symbols.

Decrease thickness of svg path

Is there any way to decrease svg path thickness? I have following icon in svg format but this icon is made by single path. Adjusting atrributes "fill" or "stroke-width" not working.
What I am trying to do is reduce thickness of visible border by half.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
Is there any online editor which can do that? Or maybe there is some css tricks that I don't know?

Path thickness is negligible. Your path is not defining the lines you see, it is defining the border of those lines explicitly. You can see what the path describes by adding stroke="red". You can't decrease the thickness of the filled-in polygons by fiddling with the attributes alone. The only thing you can do without completely redoing the path is to use the background-colour stroke to erase part of the filled-in portion, though I'd argue it can't look as good as a hand-crafted icon:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path stroke-width="1" stroke="white" d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon stroke-width="1" stroke="white" points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>

Rounded corner only on one side of svg <rect>

I am trying to implement a bar chart like diagram. I have the following html element
<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
I want to give the top corner of the rectangle a rounded shape.
How is it possible?
I am not able to apply border-radius property.

You may use clipPath too. It's kind of a hack but it may be easier to implement.
Assuming the follow:
your rect is width="10" and height="51"
the top corner will be rx="5" and ry="5"
<svg>
<defs>
<clipPath id="round-corner">
<rect x="0" y="0" width="10" height="56" rx="5" ry="5"/>
</clipPath>
</defs>
<!-- if you want to use x="35" y="-135" put clip-path on a `g` element -->
<rect width="10"
height="51"
clip-path="url(#round-corner)"
style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
</svg>
Some Notes:
So the clipPath > rect > width is exactly the same as your rect.
Instead for clipPath > rect > height, you have to consider the corner radius on top and thus the height should be rect.height + desired-corner-radius (in this case 51px + 5px).
In that way you won't touch the bottom part of your rect with the clipPath.

Wrote an article explaining this https://medium.com/#dphilip/one-side-rounded-rectangle-using-svg-fb31cf318d90
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M10,40
h50
q5,0 5,5
v10
q0,5 -5,5
h-50
z
"
fill="#4EDFA5"
>
<svg>

As commented by Robert Longson you need to convert your rect element to a path element to control the rounded corners.
In the following example, I used a cubic bezier curve with the Q command to make the top left rounded corner (Q1 1 5 1 in the d attribute):
svg{
height:90vh;
width:auto;
}
<svg viewbox="0 0 10 50">
<path d="M1 49 V5 Q1 1 5 1 H9 V49z"
fill="rgba(255, 122, 0, 0.8)" />
</svg>

Use the <path> element with the arc command (http://devdocs.io/svg/attribute/d#arcto).
Syntax: a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy
<svg width="200" height="200" viewBox="0 0 10 10">
<path d="M0,8 v-3 a5,5 0 0 1 5,-5 h3 v8 z" />
</svg>

How to style one particular SVG path in CSS?

Is it possible to style differently a same SVG symbol with 2 distinct CSS classes. Like in this jsfiddle
.shape-55 {
width: 55px;
height: 55px;
}
/* Want to color only the first path in red */
.shape-style-1 path:nth-of-type(1) {
fill: red;
}
/* Want to color only the first path in blue */
.shape-style-2 path:nth-of-type(1) {
fill: blue;
}
<!-- SVG Spritesheets-->
<svg class="shape" style="display:none;">
<symbol viewBox="0 0 64 64" id="shape-1">
<title>sw_av_a_tkn-cscd</title>
<g>
<g>
<path d="M22.541,0C10.511,0,0.723,4.298,0.723,9.581v4.455c0,5.283,9.788,9.581,21.817,9.581c12.032,0,21.819-4.298,21.819-9.581
V9.581C44.359,4.298,34.572,0,22.541,0z M40.568,14.969v3.733c-2.49,1.708-6.309,3.034-10.837,3.726v-3.804
C34.17,17.941,37.963,16.646,40.568,14.969z M7.197,3.443c1.56,0.624,2.804,1.122,3.78,1.513c1.959-0.907,4.483-1.582,7.34-1.925
c-0.348-0.535-0.787-1.213-1.332-2.061c1.771-0.204,3.635-0.315,5.556-0.315c1.926,0,3.792,0.112,5.569,0.318
c-0.548,0.847-0.984,1.522-1.329,2.058c2.851,0.343,5.381,1.018,7.34,1.925c0.973-0.391,2.215-0.888,3.771-1.508
c3.268,1.453,5.387,3.368,5.748,5.483c-2.227,0.07-3.982,0.123-5.357,0.167c0.025,0.158,0.043,0.318,0.043,0.482
c0,1.35-0.918,2.608-2.498,3.665c1.137,0.313,2.582,0.713,4.414,1.219c-2.543,1.629-6.314,2.89-10.756,3.542
c-0.682-0.83-1.229-1.495-1.661-2.02c-1.649,0.252-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c-1.235,0-0.006,0.66-0.006,0
c0,0,0,0-0.002,0c-1.849,0-3.621-0.136-5.271-0.388c-0.432,0.524-0.979,1.19-1.664,2.021c-4.448-0.653-8.223-1.913-10.765-3.544
c1.828-0.506,3.273-0.905,4.41-1.219c-1.58-1.057-2.495-2.315-2.495-3.665c0-0.164,0.018-0.324,0.041-0.482
C5.424,9.055,3.672,9.002,1.44,8.932C1.801,6.814,3.923,4.899,7.197,3.443z M4.512,14.969c2.611,1.679,6.406,2.975,10.854,3.656
v3.806c-4.541-0.691-8.359-2.019-10.854-3.729V14.969z"></path>
<path d="M22.541,13.296c4.596,0,8.199-1.633,8.199-3.715c0-2.084-3.604-3.718-8.199-3.718c-4.597,0-8.197,1.634-8.197,3.718
C14.343,11.663,17.944,13.296,22.541,13.296z M22.541,6.521c4.089,0,7.54,1.4,7.54,3.06c0,1.658-3.451,3.059-7.54,3.059
c-4.087,0-7.541-1.4-7.541-3.059C15,7.922,18.454,6.521,22.541,6.521z"></path>
</g>
<path d="M25.038,34.037c-0.81,0.059-1.638,0.094-2.483,0.094c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.141-5.271-0.391c-0.432,0.524-0.979,1.191-1.664,2.022c-4.448-0.653-8.223-1.912-10.765-3.546
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.173-5.81-2.753-7.378-4.609c-0.028,0.211-0.052,0.424-0.052,0.64v4.456
c0,5.266,9.721,9.548,21.694,9.58C22.864,38.741,23.758,36.27,25.038,34.037z M15.367,40.185c-4.541-0.69-8.359-2.021-10.854-3.729
v-3.733c2.611,1.679,6.406,2.976,10.854,3.658V40.185z"></path>
<path d="M22.083,45.084c0-0.699,0.041-1.388,0.104-2.069c-1.72-0.018-3.375-0.143-4.917-0.376c-0.432,0.524-0.979,1.189-1.664,2.02
c-4.448-0.652-8.223-1.912-10.765-3.544c1.288-0.355,2.376-0.659,3.312-0.915c-3.259-1.172-5.81-2.749-7.378-4.605
c-0.028,0.21-0.052,0.426-0.052,0.639v4.456c0,5.281,9.788,9.578,21.817,9.578c0.061,0,0.116-0.003,0.175-0.003
C22.316,48.6,22.083,46.868,22.083,45.084z M15.367,49.08c-4.541-0.69-8.359-2.017-10.854-3.728v-3.731
c2.611,1.679,6.406,2.974,10.854,3.655V49.08z"></path>
<path d="M23.161,51.904c-0.204,0.003-0.402,0.023-0.606,0.023c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.14-5.271-0.391c-0.432,0.524-0.979,1.189-1.664,2.023c-4.448-0.653-8.223-1.915-10.765-3.548
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.172-5.81-2.752-7.378-4.611c-0.028,0.213-0.052,0.426-0.052,0.642v4.456
c0,5.282,9.788,9.581,21.817,9.581c1.519,0,2.999-0.069,4.427-0.198C25.3,56.883,23.998,54.499,23.161,51.904z M15.367,57.979
c-4.541-0.691-8.359-2.018-10.854-3.726v-3.736c2.611,1.679,6.406,2.976,10.854,3.657V57.979z"></path>
<g>
<path d="M44.359,22.805v-4.37c0-0.213-0.02-0.428-0.055-0.639c-1.568,1.858-4.119,3.437-7.375,4.608
c0.863,0.237,1.877,0.518,3.043,0.84C41.393,22.958,42.859,22.805,44.359,22.805z"></path>
<path d="M26.123,32.331c1.037-1.479,2.25-2.82,3.608-4.007v-0.846c0.454-0.069,0.897-0.151,1.341-0.232
c0.432-0.322,0.868-0.633,1.323-0.923c-0.933,0.207-1.9,0.391-2.909,0.539c-0.682-0.831-1.229-1.495-1.661-2.02
c-1.649,0.249-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.139-5.271-0.388c-0.432,0.524-0.979,1.188-1.664,2.021c-4.448-0.653-8.223-1.914-10.765-3.546
c1.288-0.355,2.376-0.657,3.312-0.914c-3.259-1.172-5.81-2.75-7.378-4.608c-0.028,0.211-0.052,0.426-0.052,0.639v4.456
c0,5.283,9.788,9.58,21.817,9.58C23.761,32.471,24.954,32.417,26.123,32.331z M15.367,31.285
c-4.541-0.693-8.359-2.018-10.854-3.728v-3.733c2.611,1.679,6.406,2.974,10.854,3.656V31.285z"></path>
</g>
<path d="M44.359,26.166c-10.445,0-18.914,8.469-18.914,18.918C25.446,55.53,33.914,64,44.359,64
c10.451,0,18.918-8.47,18.918-18.916C63.277,34.635,54.811,26.166,44.359,26.166z M53.428,46.976c0,0.49-0.402,0.889-0.891,0.889
h-5.393v5.393c0,0.49-0.4,0.893-0.891,0.893h-3.789c-0.486,0-0.889-0.402-0.889-0.893v-5.393h-5.393
c-0.488,0-0.889-0.398-0.889-0.889v-3.786c0-0.49,0.4-0.892,0.889-0.892h5.393v-5.393c0-0.489,0.402-0.886,0.889-0.886h3.789
c0.49,0,0.891,0.396,0.891,0.886v5.393h5.393c0.488,0,0.891,0.401,0.891,0.892V46.976z"></path>
</g>
</symbol>
</svg>
<div>
<svg class="shape-55 shape-style-1">
<use xlink:href="#shape-1"></use>
</svg>
</div>
<div>
<svg class="shape-55 shape-style-2">
<use xlink:href="#shape-1"></use>
</svg>
</div>
I need to color the first "path" in red when using CSS class shape-style-1 and in blue when using shape-style-2.
Thank you.

You can style the parent div's colors, and use fill: currentColor to use that color for the appropriate SVG element.
So this CSS:
div > svg {
width: 55px;
height: 55px;
}
svg g g > path:nth-of-type(1) {
fill: currentColor;
}
div:nth-of-type(even) {
color: red;
}
div:nth-of-type(odd) {
color: blue;
}
… used with this HTML:
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
… will look like this:
Fiddle

You can achieve what you want, but without CSS.
See this fiddle: http://jsfiddle.net/41e0f7z5/2/
The trick is that you can set a fill attribute to the <use> element. Then, your symbol is composed of a path and a group owning all the other pathes. This group has a fillattribute set to black. But, because the firt path has no fillattribute, it will inherit from the <use> one.
<svg class="shape" style="display:none;">
<symbol viewBox="0 0 64 64" id="shape-1">
<path d="..."/>
<g fill="black">
<path d="..." />
<path d="..." />
<path d="..." />
...
</g>
</symbol>
</svg>
<div>
<svg class="shape-55">
<use xlink:href="#shape-1" fill="red"></use>
</svg>
</div>
<div>
<svg class="shape-55">
<use xlink:href="#shape-1" fill="blue"></use>
</svg>
</div>

Something like this?
.shape-55 {
width: 55px;
height: 55px;
}
<body>
<!-- SVG Spritesheets-->
<svg class="shape" style="display:none;">
<symbol viewBox="0 0 64 64" id="shape-1">
<title>sw_av_a_tkn-cscd</title>
<path d="M22.541,0C10.511,0,0.723,4.298,0.723,9.581v4.455c0,5.283,9.788,9.581,21.817,9.581c12.032,0,21.819-4.298,21.819-9.581
V9.581C44.359,4.298,34.572,0,22.541,0z M40.568,14.969v3.733c-2.49,1.708-6.309,3.034-10.837,3.726v-3.804
C34.17,17.941,37.963,16.646,40.568,14.969z M7.197,3.443c1.56,0.624,2.804,1.122,3.78,1.513c1.959-0.907,4.483-1.582,7.34-1.925
c-0.348-0.535-0.787-1.213-1.332-2.061c1.771-0.204,3.635-0.315,5.556-0.315c1.926,0,3.792,0.112,5.569,0.318
c-0.548,0.847-0.984,1.522-1.329,2.058c2.851,0.343,5.381,1.018,7.34,1.925c0.973-0.391,2.215-0.888,3.771-1.508
c3.268,1.453,5.387,3.368,5.748,5.483c-2.227,0.07-3.982,0.123-5.357,0.167c0.025,0.158,0.043,0.318,0.043,0.482
c0,1.35-0.918,2.608-2.498,3.665c1.137,0.313,2.582,0.713,4.414,1.219c-2.543,1.629-6.314,2.89-10.756,3.542
c-0.682-0.83-1.229-1.495-1.661-2.02c-1.649,0.252-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c-1.235,0-0.006,0.66-0.006,0
c0,0,0,0-0.002,0c-1.849,0-3.621-0.136-5.271-0.388c-0.432,0.524-0.979,1.19-1.664,2.021c-4.448-0.653-8.223-1.913-10.765-3.544
c1.828-0.506,3.273-0.905,4.41-1.219c-1.58-1.057-2.495-2.315-2.495-3.665c0-0.164,0.018-0.324,0.041-0.482
C5.424,9.055,3.672,9.002,1.44,8.932C1.801,6.814,3.923,4.899,7.197,3.443z M4.512,14.969c2.611,1.679,6.406,2.975,10.854,3.656
v3.806c-4.541-0.691-8.359-2.019-10.854-3.729V14.969z"></path>
<g fill="black">
<path d="M22.541,13.296c4.596,0,8.199-1.633,8.199-3.715c0-2.084-3.604-3.718-8.199-3.718c-4.597,0-8.197,1.634-8.197,3.718
C14.343,11.663,17.944,13.296,22.541,13.296z M22.541,6.521c4.089,0,7.54,1.4,7.54,3.06c0,1.658-3.451,3.059-7.54,3.059
c-4.087,0-7.541-1.4-7.541-3.059C15,7.922,18.454,6.521,22.541,6.521z"></path>
<path d="M25.038,34.037c-0.81,0.059-1.638,0.094-2.483,0.094c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.141-5.271-0.391c-0.432,0.524-0.979,1.191-1.664,2.022c-4.448-0.653-8.223-1.912-10.765-3.546
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.173-5.81-2.753-7.378-4.609c-0.028,0.211-0.052,0.424-0.052,0.64v4.456
c0,5.266,9.721,9.548,21.694,9.58C22.864,38.741,23.758,36.27,25.038,34.037z M15.367,40.185c-4.541-0.69-8.359-2.021-10.854-3.729
v-3.733c2.611,1.679,6.406,2.976,10.854,3.658V40.185z"></path>
<path d="M22.083,45.084c0-0.699,0.041-1.388,0.104-2.069c-1.72-0.018-3.375-0.143-4.917-0.376c-0.432,0.524-0.979,1.189-1.664,2.02
c-4.448-0.652-8.223-1.912-10.765-3.544c1.288-0.355,2.376-0.659,3.312-0.915c-3.259-1.172-5.81-2.749-7.378-4.605
c-0.028,0.21-0.052,0.426-0.052,0.639v4.456c0,5.281,9.788,9.578,21.817,9.578c0.061,0,0.116-0.003,0.175-0.003
C22.316,48.6,22.083,46.868,22.083,45.084z M15.367,49.08c-4.541-0.69-8.359-2.017-10.854-3.728v-3.731
c2.611,1.679,6.406,2.974,10.854,3.655V49.08z"></path>
<path d="M23.161,51.904c-0.204,0.003-0.402,0.023-0.606,0.023c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.14-5.271-0.391c-0.432,0.524-0.979,1.189-1.664,2.023c-4.448-0.653-8.223-1.915-10.765-3.548
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.172-5.81-2.752-7.378-4.611c-0.028,0.213-0.052,0.426-0.052,0.642v4.456
c0,5.282,9.788,9.581,21.817,9.581c1.519,0,2.999-0.069,4.427-0.198C25.3,56.883,23.998,54.499,23.161,51.904z M15.367,57.979
c-4.541-0.691-8.359-2.018-10.854-3.726v-3.736c2.611,1.679,6.406,2.976,10.854,3.657V57.979z"></path>
<path d="M44.359,22.805v-4.37c0-0.213-0.02-0.428-0.055-0.639c-1.568,1.858-4.119,3.437-7.375,4.608
c0.863,0.237,1.877,0.518,3.043,0.84C41.393,22.958,42.859,22.805,44.359,22.805z"></path>
<path d="M26.123,32.331c1.037-1.479,2.25-2.82,3.608-4.007v-0.846c0.454-0.069,0.897-0.151,1.341-0.232
c0.432-0.322,0.868-0.633,1.323-0.923c-0.933,0.207-1.9,0.391-2.909,0.539c-0.682-0.831-1.229-1.495-1.661-2.02
c-1.649,0.249-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.139-5.271-0.388c-0.432,0.524-0.979,1.188-1.664,2.021c-4.448-0.653-8.223-1.914-10.765-3.546
c1.288-0.355,2.376-0.657,3.312-0.914c-3.259-1.172-5.81-2.75-7.378-4.608c-0.028,0.211-0.052,0.426-0.052,0.639v4.456
c0,5.283,9.788,9.58,21.817,9.58C23.761,32.471,24.954,32.417,26.123,32.331z M15.367,31.285
c-4.541-0.693-8.359-2.018-10.854-3.728v-3.733c2.611,1.679,6.406,2.974,10.854,3.656V31.285z"></path>
<path d="M44.359,26.166c-10.445,0-18.914,8.469-18.914,18.918C25.446,55.53,33.914,64,44.359,64
c10.451,0,18.918-8.47,18.918-18.916C63.277,34.635,54.811,26.166,44.359,26.166z M53.428,46.976c0,0.49-0.402,0.889-0.891,0.889
h-5.393v5.393c0,0.49-0.4,0.893-0.891,0.893h-3.789c-0.486,0-0.889-0.402-0.889-0.893v-5.393h-5.393
c-0.488,0-0.889-0.398-0.889-0.889v-3.786c0-0.49,0.4-0.892,0.889-0.892h5.393v-5.393c0-0.489,0.402-0.886,0.889-0.886h3.789
c0.49,0,0.891,0.396,0.891,0.886v5.393h5.393c0.488,0,0.891,0.401,0.891,0.892V46.976z"></path>
</g>
</symbol>
</svg>
<div>
<svg class="shape-55 shape-style-1" fill="red">
<use xlink:href="#shape-1"></use>
</svg>
</div>
<div>
<svg class="shape-55 shape-style-2" fill="blue">
<use xlink:href="#shape-1"></use>
</svg>
</div>
</body>