If I have a regular SVG element like this, but it is immutable as in you cannot clone, or change any parameters such as height and width. Is there any way to scale it?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" height="42" width="350">
<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" version="1.1" id="svg2" xml:space="preserve" x="30" y="0" width="80" height="65" viewBox="-200 400 1600 900">
<metadata>
...
</metadata>
<g>
...
</g>
</svg>
</svg>
If you have an SVG like this:
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"/>
</svg>
You can wrap it in another SVG element where the viewBox matches the size of the original SVG. Now, you can specify a size (width and/or height) or leave it out to make it fill the available space.
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 50 50">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"/>
</svg>
</svg>
You can do the same with the SVG as an external resource (here a data URI for the example) where the width and the height attributes of the image element matches the viewBox of the parent SVG element.
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100">
<image width="100" height="100" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiBmaWxsPSJvcmFuZ2UiLz4KPC9zdmc+" />
</svg>
Related
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 nested inline SVGs in order to flexibly arrange smaller svg images within an svg container. However, I am struggling to understand the rules of how nested SVGs are sized.
svg {
display: block;
}
Why does this correctly display a 200px by 200px red square:
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
But why does wrapping in another svg element cause the square to become 150px by 150px?
for example:
<svg>
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
</svg>
or:
<svg width="200px">
<svg width="200px" viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
</svg>
or:
<svg width="200px">
<svg viewBox="0 0 100 100">
<rect width="100" height="100" fill="red" />
</svg>
</svg>
You can change the width and the height of each successive <rect> but be sure to maintain the same width and viewbox of each nested parent <svg> every time.
Working Example:
<svg width="200px" viewBox="0 0 200 200">
<rect width="200" height="200" fill="red" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="100" height="100" fill="yellow" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="50" height="50" fill="red" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="25" height="25" fill="yellow" />
<svg width="200px" viewBox="0 0 200 200">
<rect width="12.5" height="12.5" fill="red" />
</svg>
</svg>
</svg>
</svg>
</svg>
I have created an svg heart with a background image inside.
I'm trying to make the svg larger, but changing the width and height on both the pattern and the svg itself does not work.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="315" width="345" >
<!-- START SVG RULES -->
<defs>
<!-- DEFINE IMAGE INSIDE PATTERN -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" x="0" y="0" width="100" height="100" /></pattern>
<!-- SVG SHAPE CREATION -->
<g id="heart">
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" />
</g>
</defs>
<use xlink:href="#heart" class="outline" fill="url(#img1)" />
</svg>
For a resizable SVG use viewBox="0 0 315 345"instead height="315" width="345"
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 315 345" >
<!-- START SVG RULES -->
<defs>
<!-- DEFINE IMAGE INSIDE PATTERN -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" x="0" y="0" width="100" height="100" /></pattern>
<!-- SVG SHAPE CREATION -->
<g id="heart">
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" />
</g>
</defs>
<use xlink:href="#heart" class="outline" fill="url(#img1)" />
</svg>
Click the resize button to see if this is what you need.
https://jsfiddle.net/gbxquc05/29/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 400 400">
Drawing paths in SVG is unfortunately limitted to absolute units. This is a workaround using viewBox to create coordinate system that transforms to percentage.
Is there some easy solution to center image on X and Y inside SVG? I have to keep svg element with percentage.
svg {
width: 20%;
}
<svg version="1.1" id="Izolovaný_režim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 294.7 320.3" xml:space="preserve">
<pattern id="img" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://cdn-mf0.heartyhosting.com/sites/mensfitness.com/files/styles/wide_videos/public/1280-fit-man-work-desk.jpg?itok=xpQGNXMI" x />
</pattern>
<g>
<polygon points="147.4,320.3 294.7,235.2 294.7,85.1 147.4,0 0,85.1 0,235.2 " fill="url(#img)"/>
</g>
</svg>
Thank you. ;)
To center you image pattern in the polygon you can use the x and y attributes of the pattern to set the origin of the image.
So in your case you could set it to x="50%" y="50%"
svg {
width: 20%;
}
<svg version="1.1" id="Izolovaný_režim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 294.7 320.3" xml:space="preserve">
<pattern id="img" patternUnits="userSpaceOnUse" width="100%" height="100%" x="50%" y="50%">
<image xlink:href="https://cdn-mf0.heartyhosting.com/sites/mensfitness.com/files/styles/wide_videos/public/1280-fit-man-work-desk.jpg?itok=xpQGNXMI" x />
</pattern>
<g>
<polygon points="147.4,320.3 294.7,235.2 294.7,85.1 147.4,0 0,85.1 0,235.2 " fill="url(#img)"/>
</g>
</svg>
I want to hide the clipPath element so it doesn't show empty white space in the browser, but I still want to be able to use it from other svgs, like the image.
If I put width 0 and height 0 on it then IE won't show the image either.
If I put display:none the image doesn't show up in any browser.
<svg height="0" width="0" viewBox="0 0 400 400">
<defs>
<clipPath id="svgPath">
<circle fill="#FFFFFF" cx="50%" cy="50%" r="200" />
</clipPath>
</defs>
</svg>
<svg width="400" height="400" viewBox="0 0 400 400">
<image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" />
</svg>
Any ideas?
Put it in the same SVG as the image and there's nothing to hide.
<svg width="400" height="400" viewBox="0 0 400 400">
<defs>
<clipPath id="svgPath">
<circle fill="#FFFFFF" cx="50%" cy="50%" r="200" />
</clipPath>
</defs>
<image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" />
</svg>