<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 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
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
I need to have text inside svg navigation buttons that will not affect the ability for the button to be used and will maintain the hover effects. The text also needs to follow the save curve as the button and be centered within the button. I have provided my HTML for reference.
The problem with my attempt is that it acts similar to placing absolute-positioned h or p elements over the svg path. It interrupts the functionality and hover events since it is another element.
<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
<text style="transform:rotate(-20deg);" x="0" y="40"><defs><path stroke="white" id="curve-text" d="M 0 15 A 80 80 0 0 1 80 27.2"></path></defs><textpath xlink:href="#curve-text" style="font-size:9pt;">Test</textpath></text>
</g>
</svg>
I'm using the path #thisID as textPath reference. I'm using startOffset
to change the starting position of the text along the path.
<svg viewbox="0 0 86 20" version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<path id="thisID" d="M 80 5 A 100 100 0 0 0 22.2 27.2 L 37.58 42.58 A 80 80 0 0 1 80 27.2 Z"></path>
<text fill="gold">
<textPath xlink:href="#thisID" startOffset="63%" >
<tspan dy="-6">test</tspan>
</textPath>
</text>
</g>
</svg>
I have a svg image of an instagram icon that I exported with clipping mask in Illustrator.
However, when I I try to display it, it doesn't show in any browser. (Other social icons showed)
I used the img tag to display the svg as it is displayed finely with other icons. Am I doing something wrong? Does img tag support clipping mask images?
Sorry that I don't have much experience with svg. Any suggestion is very appreciated! Thanks!
Here is my code:
<nav id="socialNav">
<ul>
<li><img src="../../_images/social-facebook.svg"></li>
<li><img src="../../_images/social-instagram_color-01.svg"></li>
<li><img src="../../_images/social-twitter.svg"></li>
<li><img src="../../_images/social-googleplus_test.svg"></li>
</ul>
</nav>
<?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="56.7px" height="56.7px" viewBox="0 0 56.7 56.7" enable-background="new 0 0 56.7 56.7" xml:space="preserve">
<g>
<g>
<defs>
<path id="SVGID_1_" d="M28.2,16.7c-7,0-12.8,5.7-12.8,12.8c0,7.1,5.7,12.799,12.8,12.799C35.299,42.299,41,36.5,41,29.5
C41,22.5,35.2,16.7,28.2,16.7z M28.2,37.7C23.7,37.7,20,34,20,29.5c0-4.5,3.7-8.202,8.2-8.202c4.5,0,8.2,3.7,8.2,8.202
C36.4,34,32.7,37.7,28.2,37.7z M41.5,13.5c1.602,0,2.898,1.298,2.898,2.9s-1.298,2.9-2.898,2.9c-1.602,0-2.9-1.298-2.9-2.9
S39.899,13.5,41.5,13.5z M49,8.9C46.4,6.2,42.7,4.8,38.5,4.8H17.9c-8.7,0-14.5,5.8-14.5,14.5v20.5c0,4.302,1.4,8,4.2,10.701
C10.3,53.1,13.9,54.4,18,54.4h20.4c4.3,0,7.899-1.399,10.5-3.899C51.6,47.9,53,44.2,53,39.9V19.3C53,15.1,51.6,11.5,49,8.9z
M48.4,39.9c0,3.101-0.899,5.601-2.7,7.3c-1.8,1.7-4.3,2.6-7.3,2.6H18c-3,0-5.5-0.898-7.3-2.6c-1.8-1.8-2.7-4.3-2.7-7.4V19.3
c0-3,0.9-5.5,2.7-7.3c1.7-1.7,4.3-2.6,7.3-2.6h20.6c3,0,5.5,0.9,7.3,2.7c1.7,1.8,2.7,4.3,2.7,7.2v20.6H48.4z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g id="LF6r1C.tif_2_" clip-path="url(#SVGID_2_)">
<image overflow="visible" enable-background="new " width="601" height="514" id="Layer_0_3_" xlink:href="B91C5780217A8A7F.png" transform="matrix(0.0961 0 0 0.1609 -2.4072 -11.1685)">
</image>
</g>
</g>
</g>
</svg>
Here'e the image with a few changes. The clip-path's coords have instead been used to create a path, which is then filled with a radial gradient. The file is now simply a filled path, rather than a clipped image. It's going to scale better, is 99% smaller (1283 bytes total vs 135Kb just for the gradient) and avoids the problem inherent with linked (vs embedded) files. Enjoy! Hit the Blue button to see it.
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 56.7 56.7" viewBox="0 0 56.7 56.7" y="0px" x="0px" width='56.7' height='56.7'>
<defs>
<radialGradient id="a" gradientUnits="userSpaceOnUse" cy="47.1" cx="16.48" gradientTransform="matrix(2.215 0 0 2.215 -20.03 -57.24)" r="25.3">
<stop stop-color="#f9d363" offset="0"/>
<stop stop-color="#f26c1f" offset=".3658"/>
<stop stop-color="#ce0665" offset=".6829"/>
<stop stop-color="#541fdb" offset="1"/>
</radialGradient>
</defs>
<path d="m28.2 16.7c-7 0-12.8 5.7-12.8 12.8s5.7 12.8 12.8 12.8 12.8-5.8 12.8-12.8-5.8-12.8-12.8-12.8zm0 21c-4.5 0-8.2-3.7-8.2-8.2s3.7-8.202 8.2-8.202 8.2 3.7 8.2 8.202c0 4.5-3.7 8.2-8.2 8.2zm13.3-24.2c1.602 0 2.898 1.298 2.898 2.9s-1.298 2.9-2.898 2.9c-1.602 0-2.9-1.298-2.9-2.9s1.299-2.9 2.9-2.9zm7.5-4.6c-2.6-2.7-6.3-4.1-10.5-4.1h-20.6c-8.7 0-14.5 5.8-14.5 14.5v20.5c0 4.302 1.4 8 4.2 10.7 2.7 2.6 6.3 3.9 10.4 3.9h20.4c4.3 0 7.899-1.399 10.5-3.899 2.7-2.6 4.1-6.3 4.1-10.6v-20.6c0-4.2-1.4-7.8-4-10.4zm-0.6 31c0 3.101-0.899 5.601-2.7 7.3-1.8 1.7-4.3 2.6-7.3 2.6h-20.4c-3 0-5.5-0.898-7.3-2.6-1.8-1.8-2.7-4.3-2.7-7.4v-20.5c0-3 0.9-5.5 2.7-7.3 1.7-1.7 4.3-2.6 7.3-2.6h20.6c3 0 5.5 0.9 7.3 2.7 1.7 1.8 2.7 4.3 2.7 7.2v20.6h-0.2z" fill-rule="evenodd" fill="url(#a)"/>
</svg>