I have the following svg file with three SVG images inside:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- Circular Arrow -->
<symbol id="circular-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g transform="matrix(-1 0 0 1 1025.9 0)">
<path transform="matrix(-1 0 0 1 1025.9 0)" d="m970.62 20.137-132.6 125.35c-88.627-77.213-202.54-120.16-320.83-120.16-129.5 0-253.78 51.476-345.35 143.05-91.573 91.573-143.05 215.85-143.05 345.36 0 129.5 51.477 253.78 143.05 345.35 91.573 91.573 215.85 143.05 345.35 143.05 129.5-1e-4 253.78-51.478 345.36-143.05 91.573-91.573 143.05-215.85 143.05-345.35 0-2.962-0.167-5.9052-0.2208-8.8613l-149.94 2.3301c0.04204 2.1787 0.16211 4.3479 0.16211 6.5312 0 89.78-35.633 175.81-99.117 239.29-63.484 63.484-149.51 99.117-239.29 99.117-89.78 0-175.81-35.633-239.29-99.117-63.484-63.484-99.117-149.51-99.117-239.29 0-89.78 35.633-175.81 99.117-239.29s149.51-99.117 239.29-99.117c77.097 0 151.43 26.279 211.09 73.904l-118.94 112.44 158.12 0.06836 158.13 0.07031 22.514-170.84 22.516-170.84z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
</g>
</symbol>
<!-- Speech bubble -->
<symbol id="speech-bubble" height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="currentColor" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="currentColor" id="Group" transform="translate(-720.000000, -192.000000)"><path d="M728,205 C727.092687,205 726.225692,204.86437 725.430064,204.617506 C724.617765,205.250987 723.248775,206.131104 721.912598,206.131104 C722.612692,205.468456 722.810743,204.184192 722.854217,203.228743 C721.703165,202.248586 721,200.938813 721,199.5 C721,196.462434 724.134007,194 728,194 C731.865993,194 735,196.462434 735,199.5 C735,202.537566 731.865993,205 728,205 Z M728,205" id="Oval 247"/></g></g></symbol>
</symbol>
<!-- Loupe -->
<symbol id="loupe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="none" stroke-width="36" stroke-linecap="round"
d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/>
</symbol>
</svg>
I can access the first 2 SVG images with help of this html code:
Example:
<svg>
<use href="img/icons.svg#speech-bubble"></use>
</svg>
But the last one doesn't work. It is independent of the image. If I move "Speech bubble" to the bottom I won't be able to access this one and "Loupe" works perfectly fine again.
Typo: you have an extra closing tag at line 12 - the one for the Speech bubble
Related
<svg viewBox="-151 -323 4000 4000" style="" fill="blue">
<g>
<circle fill="blue" class="in-circle" r="110">
<svg
preserveAspectRatio="xMidYMid meet"
height="1em"
width="1em"
viewBox="0 0 40 40"
style="vertical-align: middle;color: red;"
fill="red"
>
<g>
<path d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path>
</g>
</svg>
</circle>
</g>
</svg>;
I was able to display the circle, but I am having trouble displaying the svg x inside of it. Also, is there a way to optimize the viewBox values automatically without having to enter values, because I am having trouble getting the correct value to maximize the width and height of the icons.
<g transform="translate(36, 38)">
<circle class="in-circle" r="110">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 752">
<path d="M196.56 543.17 472.2 384.03v-16.051l-275.64-159.14Zm284.89-334.59v332.99h74V208.58Z"></path>
</svg>
</circle>
</g>;
Also, I tried this, but again it doesn't seem to be working.
You don't put the path inside the circle tag. You need to set the coordinates ofevery shape. In this case I would put the ctoss inside a symbol element with a viewBox and use it with <use>. This will allow me to give the use a position (x,y) and a width and a height. In the nest example I'm giving the use a width and height of 100 vut you can choose another value:
<svg viewBox="-150 -150 300 300" >
<circle fill="blue" class="in-circle" r="110"></circle>
<use href="#sym" width="100" height="100" x="-50" y="-50" />
<symbol id="sym" viewBox="6.9 8 26.5 26.5" fill="red">
<path id="kk" d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path>
</symbol>
</svg>
I have the following SVG:
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 470-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#00C7B2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#00957A"
/>
</g>
</svg>
I want to get border rounded or set border-radius. Like this:
How can I achieve that rounded corner effect? Please look into this.
I am not sure there is way to round SVG in HTML (like apply CSS?), but you can use an SVG to the editor to the edits. I use Figma to edit this, but any vector-based graphic solution should be fine I guess.
<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>
Don't use a text editor to do that. Use an SVG editor like Inkscape. This is particularly important in this case because there is no easy way to make a <path> round. If it would be a box then it would be possible. Opening it in Inkscape and converting the corners into Beziers you can achieve something this:
<svg
height="100"
width="100"
viewBox="0 0 1000 1000"
version="1.1"
id="svg4690">
<g
id="g4663">
<g
id="g4659"
transform="translate(91.89342,225.31329)">
<path
d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
id="path4657"
inkscape:connector-curvature="0"
style="fill:#00c7b2"
sodipodi:nodetypes="ccczcccccccc" />
</g>
<path
d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
id="path4661"
inkscape:connector-curvature="0"
style="fill:#00957a"
sodipodi:nodetypes="ccczccc" />
</g>
</svg>
Also, note that the original SVG is incorrectly positioned and the top of the green and dark-green areas do not match:
However in the snippet this is not visible because this area is out of the viewbox. This is another good reason to use Inkscape.
Another option to make round corners is to use boxes. Boxes can be rounded through the ry attribute. Here are 3 boxes with mildly rounded, rounded and extra rounded settings. You only need to position them in the right place.
<svg
height="100"
width="100"
viewBox="0 0 1000 1000"
version="1.1"
id="svg4690">
<g
id="g4663">
<g
id="g4659"
transform="translate(91.89342,225.31329)">
<path
d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
id="path4657"
inkscape:connector-curvature="0"
style="fill:#00c7b2"
sodipodi:nodetypes="ccczcccccccc" />
</g>
<path
d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
id="path4661"
inkscape:connector-curvature="0"
style="fill:#00957a"
sodipodi:nodetypes="ccczccc" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect4694"
width="81.383575"
height="81.383575"
x="170.25067"
y="196.41048"
ry="8.6862621" />
<rect
ry="13.363494"
y="291.82568"
x="170.25067"
height="81.383575"
width="81.383575"
id="rect4696"
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect4698"
width="81.383575"
height="81.383575"
x="170.25067"
y="386.77319"
ry="33.007805" />
</g>
</svg>
I got this transform attribute from SVG:
transform="rotate(15.331623, 679.50173, 211.39806)"
And then I tried this as a replacement but it does not work.
transform: rotate(15.331623deg, 679.50173deg, 211.39806deg)
From the code above, the browser gives me an error Invalid property value. How do I achieve this using CSS?
This is the sample code of the SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg1369"
width="289.13361"
height="281.64835">
<g
transform="rotate(36.765794,489.48582,-457.27544)"
id="g5384-3">
<g
id="g5217-6">
<path
inkscape:connector-curvature="0"
id="path198-6-7"
style="opacity:0.1;isolation:isolate;mix-blend-mode:darken;fill:#231f20"
d="m 691.89441,148.35857 7.87141,19.66707 6.59397,16.4721 0.84011,107.96654 0.0447,5.95194 a 21.51,21.51 0 0 1 -0.26518,3.60192 l -24.83847,19.16058 -47.60875,0.41562 -103.55223,0.83225 -5.93791,0.0465 -21.47201,0.14518 -4.50999,0.0311 -31.96312,0.28145 -5.63546,0.0784 -6.14063,-15.34415 -6.23361,-15.5629 -20.64084,-51.54485 c -0.18233,-0.46557 -0.38118,-0.96892 -0.50311,-1.4053 l -0.11857,-13.61155 -0.42391,-54.11922 a 22.57,22.57 0 0 1 22.38558,-22.74964 l 150.44158,-1.19811 21.86587,-0.15852 61.27829,-0.54099 0.086,-0.003 a 22.25,22.25 0 0 1 8.43632,1.58775 z" />
</g>
</g>
</svg>
The SVG transform attribute's second and third values are a location to rotate around and as such are not angles.
CSS transforms specify the rotation location via the separate transform-origin property.
#g5384-3 {
transform: rotate(36.765794deg);
transform-origin: 489.48582px -457.27544px;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg1369"
width="289.13361"
height="281.64835">
<g id="g5384-3">
<g
id="g5217-6">
<path
inkscape:connector-curvature="0"
id="path198-6-7"
style="opacity:0.1;isolation:isolate;mix-blend-mode:darken;fill:#231f20"
d="m 691.89441,148.35857 7.87141,19.66707 6.59397,16.4721 0.84011,107.96654 0.0447,5.95194 a 21.51,21.51 0 0 1 -0.26518,3.60192 l -24.83847,19.16058 -47.60875,0.41562 -103.55223,0.83225 -5.93791,0.0465 -21.47201,0.14518 -4.50999,0.0311 -31.96312,0.28145 -5.63546,0.0784 -6.14063,-15.34415 -6.23361,-15.5629 -20.64084,-51.54485 c -0.18233,-0.46557 -0.38118,-0.96892 -0.50311,-1.4053 l -0.11857,-13.61155 -0.42391,-54.11922 a 22.57,22.57 0 0 1 22.38558,-22.74964 l 150.44158,-1.19811 21.86587,-0.15852 61.27829,-0.54099 0.086,-0.003 a 22.25,22.25 0 0 1 8.43632,1.58775 z" />
</g>
</g>
</svg>
I've been trying to learn how to create graphics with SVG recently, and I am coming up against a problem when trying to display an image with the 'use' tag.
I've successfully played around with the 'use' tag to create duplicate objects in other svgs, so I'm not sure what's going on here.
My attempt to display this symbol with 'use' tag results in an invisible object with 0x0 as width x height
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
<g id="yinyang">
<circle r="39"/>
<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
<circle cy="19" r="5" fill="#fff"/>
<circle cy="-19" r="5"/>
<g/>
<use href="#yinyang" transform="scale(20)"/>
</svg>
How could i fix this?
Could be just a typo with your closing group tag <g/>
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
<defs>
<g id="yinyang">
<circle r="39"/>
<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
<circle cy="19" r="5" fill="#fff"/>
<circle cy="-19" r="5"/>
</g>
</defs>
<use href="#yinyang" transform="scale(0.9)"/>
</svg>
Also, the use block will repeat the shape that is already visible. If you just want to define it somewhere, and re-use it elsewhere, you can put inside of a <defs> block
Folks,
I am experiencing issue while using SVG sprite that has a symbol with clipped path. Looks like this a known issue but I can't figure out solution by reading existing documentation out there.
I have a SVG sprite file named, icon.svg; content of which is shown below:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="bell" viewBox="0 0 22 22" preserveAspectRatio="xMinYMax meet">
<path d="M17.3 8.8c0-2.9-2.3-5.3-5.3-5.7v-.2c0-.5-.5-.9-1-.9s-1 .4-1 .9v.2c-3 .4-5.4 2.8-5.3 5.7C4.7 14.7 2 14 2 15.7c0 2.5 2.6 1.9 6.1 1.5v.3c0 1.4 1.3 2.5 2.9 2.5 1.6 0 2.9-1.1 2.9-2.5v-.3c3.5.4 6.1 1 6.1-1.5 0-1.8-2.7-.8-2.7-6.9zm-4.8 8.7c0 .6-.7 1.1-1.5 1.1s-1.5-.5-1.5-1.1c0-.2 0-.3.1-.4h2.6c.2.1.3.3.3.4z"/>
</symbol>
<symbol id="lock" viewBox="0 0 20 22" preserveAspectRatio="xMinYMax meet">
<clipPath id="lock-clip">
<path d="M16.4 8.2h-1.2V7c0-2.7-2.3-5-5.2-5-2.9 0-5.2 2.2-5.2 5v1.2H3.6c-.6 0-1.1.5-1.1 1V19c0 .6.5 1 1.1 1h12.8c.6 0 1.1-.5 1.1-1V9.2c0-.6-.5-1-1.1-1zM7.5 7c0-1.3 1.1-2.3 2.5-2.3s2.5 1 2.5 2.3v1.2h-5V7zm1 9.6l.8-3c-.4-.2-.7-.6-.7-1.1 0-.7.6-1.3 1.4-1.3s1.4.6 1.4 1.3c0 .5-.3.9-.7 1.1l.8 3h-3z"/>
</clipPath>
<path d="M-3.4-3.6h26.7v29.1H-3.4z" clip-path="url(#lock-clip)"/>
</symbol>
<symbol id="envelope" viewBox="0 0 30 22" preserveAspectRatio="xMinYMax meet">
<path d="M3 19h24V4.8l-12 6.7L3 4.8"/>
<path d="M15 9.7L27.4 3H2.6"/>
</symbol>
</svg>
Now I am referring this SVG in my markup as following:
<svg role="img" preserveAspectRatio="xMinYMin meet">
<use xlink:href="/src/assets/svgs/icons/icons.svg#bell" />
</svg>
<svg role="img" preserveAspectRatio="xMinYMin meet">
<use xlink:href="/src/assets/svgs/icons/icons.svg#lock" />
</svg>
First one shows up correctly but second one does not. Upon further finding, I see that there is some sort of issue with clip-paths and SVG sprites.
Is there any workaround for that? Am I doing anything wrong?