I have svg code which contains itemzoom property in text tag but when i opened in adobe illustrator tool it is not showing the text in zoomed effect. please help me to resolve this issue. I have to show the text in itemzoomed format.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.0"><rect style="fill:none;stroke:#373435;stroke-width:2.08346" width="500" height="500"/><g id="0.1778128929496472">
<g xmlns="http://www.w3.org/2000/svg" id="0.7911494016479048">
<text xmlns="http://www.w3.org/2000/svg" transform="translate(0.6590909090909091 0.7045454545454546)" fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="194" y="420" text-anchor="left" font-size="90.75" font-family="Casablanca" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.5050505050505051 0.543010752688172">Test</text>
</g>
</svg>
Related
So basically I have a triangular shape and I want to mask it in an image/gif.
<svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
<div class="clipSvg2">
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask11">
<!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
-->
</mask>
</defs>
//Here add some mask=url(#mask11)
<image
width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
</svg>
</div>
As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.
I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.
In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cp1">
<path clip-rule="evenodd"
d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
</clipPath>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
clip-path="url(#cp1)"/>
</svg>
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="m1">
<path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
fill="white"/>
</mask>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
mask="url(#m1)"/>
</svg>
https://jsfiddle.net/4n7j5a1t/
I'm using a svg shape divider but how I can change the background color to a background image in the fill CSS property ?
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
This is what I have tried so far but it does not keep the svg shape in place (wave):
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="120" height="250"
xlink:href="https://example.com/slider-bg.png"/>
</pattern>
</defs>
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill" fill="url(#imgpattern)"></path>
</svg>
Thanks.
EDIT
You have to define the image and then add it as a fill.
You can read more about this here
I'm not sure if this is what you wanted but I hope it helps. If not try to explain a little more and I might be able to help you.
Cheers!
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
<image xlink:href="https://image.api.playstation.com/vulcan/img/rnd/202011/0714/vuF88yWPSnDfmFJVTyNJpVwW.png" x="0" y="0"
width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path fill="url(#img1")" d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
I am trying to use <use> tag to display an SVG. I am using Wordpress and have the file under the upload folder (as any other media). For some reason the <use> doesn't show, on the browser it show width and height as 0, even though I have inlined them in it.
My code:
<svg viewBox='0 0 153 91'>
<use href='https://example.com/wp-content/uploads/2021/04/arrow.svg' width='30' height='18'>
</svg>
In the Browser:
<svg viewBox="0 0 153 91">
<use href="https://example.com/wp-content/uploads/2021/04/arrow.svg" width="30" height="18">
</use>
</svg>
The svg file:
<svg fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17" viewBox="0 0 153 91"><path d="m18.898 45.191h115.04"/><path d="m108.181 18.898 25.757 26.293-25.757 26.293"/></svg>
BONUS: Could the SVG be inlined somewhere in the <body> instead of the file uploaded?
This was missing on the SVG
xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
Final SVG should be:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"
>
<symbol id="arrow" viewBox="0 0 153 91" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="9.17">
<path d="m18.898 45.191h115.04"/><path d="m108.181 18.898 25.757 26.293-25.757 26.293"/>
</symbol>
</svg>
src: SVG image tag not working
I'm trying to edit a .svg file i found in a website template i recently downloaded.
The file code is this one:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="10px" viewBox="0 0 52 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Stacked</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="12" font-family="ProximaNova-Bold, Proxima Nova" font-weight="bold">
<text id="Stacked" fill="#000000">
<tspan x="0" y="9">Stacked</tspan>
</text>
</g>
</svg>
What i want is to simply change the text. I was expecting to do it by changing the inner text of the TSPAN tag you can see at the end of the file. But nothing happens, even if I change text from a SVG editor.
So, my question is: what is the proper way to achieve my goal? Is it even possible to change text in a SVG file?
This is your code, and it should work (please run the code):
svg{border:1px solid;overflow:visible}
<svg width="52px" height="10px" viewBox="0 0 52 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Stacked</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="12" font-family="ProximaNova-Bold, Proxima Nova" font-weight="bold">
<text id="Stacked" fill="#000000">
<tspan x="0" y="9">Stacked edited</tspan>
</text>
</g>
</svg>
As an observation: the SVG canvas is very small so large part of the text is not visible unless you add overflow:visiblefor the svg.
I want to use a SVG file as background image (css).
Here is my SVG:
<?xml version="1.0"?>
<svg width="428" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="102" width="430" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="400" width="580"/>
</g>
</g>
<g>
<title>Layer 1</title>
<text stroke="#000" transform="matrix(1.22606 0 0 1.22606 -24.7533 -46.6879)" opacity="0.3" font-style="italic" xml:space="preserve" text-anchor="left" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="87.150366" x="22.228393" stroke-width="0" fill="#000000">Hello world!</text>
</g>
</svg>
I encoded it with http://b64.io and used it like this:
#new-hello-world {
background-image: url(…);
background-repeat: no-repeat;
}
Now my problem is that the SVG is not responsive. How can I solve this?
Any help would be greatly appreciated.
EDIT:
I already tried to make the svg width and height 100% but that did not work.
Give the <svg> element a viewBox attribute e.g. viewBox = "0 0 428 100" although chipChocolate.py's suggestion of viewBox="0 0 580 400" might work better depending on exactly what you want to see.