how to use image as background in svg of guitar pick shape - svg

I want fit image under guitar pick shaped svg element
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<image xlink:href="https://picsum.photos/100" width="100" height="100"/>
</pattern>
</defs>
<path d="M8022.333,4996.688a26.281,26.281,0,0,0-9.242-16.959,36.46,36.46,0,0,0-13.247-6.725c-7.448-2.2-15.127-2.789-24.92-2.885-2.04.143-6.126.319-10.184.74a54.277,54.277,0,0,0-15.884,3.963c-7.753,3.325-13.405,8.534-16.07,16.3a33.98,33.98,0,0,0-.728,18.988,81.581,81.581,0,0,0,8.237,20.654,122.339,122.339,0,0,0,22.1,29.732,38.463,38.463,0,0,0,9.7,7.155,10.077,10.077,0,0,0,9.76-.12,40.637,40.637,0,0,0,4.96-3.138,68.929,68.929,0,0,0,11.474-11.293,122.777,122.777,0,0,0,21.05-35.139C8021.942,5011.088,8023.451,5004.055,8022.333,4996.688Zm-69.877,13.931a4.186,4.186,0,0,0,.876,1.31,4.018,4.018,0,0,0,1.285.865,3.927,3.927,0,0,0,1.556.312,4.04,4.04,0,0,0,3.058-1.394l.3-.32,3.159,1.832-.416.508a7.635,7.635,0,0,1-6.1,3.056,7.428,7.428,0,0,1-2.956-.6,7.814,7.814,0,0,1-2.457-1.672,7.815,7.815,0,0,1,0-10.94,7.805,7.805,0,0,1,2.458-1.672,7.419,7.419,0,0,1,2.955-.6,7.637,7.637,0,0,1,6.1,3.055l.416.508-3.159,1.832-.3-.32a4.044,4.044,0,0,0-3.058-1.394,3.933,3.933,0,0,0-1.556.313,4.027,4.027,0,0,0-1.284.864,4.191,4.191,0,0,0-.877,1.31,4,4,0,0,0,0,3.15Zm24.893,6.026h-3.605v-9.312a2.55,2.55,0,0,0-.774-1.886,2.714,2.714,0,0,0-.836-.568,2.338,2.338,0,0,0-.955-.21,2.462,2.462,0,0,0-1.82.778,2.555,2.555,0,0,0-.773,1.886v9.312h-3.6V4996.51h3.6v5.195a4.915,4.915,0,0,1,2.594-.718,5.935,5.935,0,0,1,2.375.488,6.358,6.358,0,0,1,1.988,1.358l.007.007a6.529,6.529,0,0,1,1.319,2.042,6.42,6.42,0,0,1,.481,2.451Zm9.51-11.571a2.441,2.441,0,0,0-.989-.263,1.891,1.891,0,0,0-1.465.62,2.25,2.25,0,0,0-.645,1.588v9.625h-3.549v-9.625a5.937,5.937,0,0,1,3.22-5.313l.02-.01a5.592,5.592,0,0,1,2.42-.539,5.316,5.316,0,0,1,1.993.382,7.532,7.532,0,0,1,1.933,1.2l.615.506-3.288,1.951Zm18.373,11.571h-3.606v-1.42a7.281,7.281,0,0,1-1.337.875,6.158,6.158,0,0,1-2.817.688,7.68,7.68,0,0,1-3.026-.6,7.26,7.26,0,0,1-2.456-1.713,8.1,8.1,0,0,1-1.654-2.52,7.962,7.962,0,0,1,0-6.048,8.086,8.086,0,0,1,1.66-2.526,7.233,7.233,0,0,1,2.451-1.708,7.667,7.667,0,0,1,3.024-.6,6.521,6.521,0,0,1,2.926.657,6.42,6.42,0,0,1,1.228.792V4996.6h3.606Z" transform="translate(-7931.052 -4970.12)" fill="url(#img1)"/>
</svg>
</div>

Related

how to set clipPath as a pattern using svg?

I created the pattern, then gave it to the circle inside the . clipPath I set to the image, but the pattern was not set for the image. How can I set a mask as a pattern for an image?
I was expecting to see a mask for the image in the form of a created pattern
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<pattern id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" />
<rect x="10" y="10" width="10" height="10" />
</pattern>
<clipPath id="msk1">
<circle fill="url(#cube)" cx="50%" cy="50%" width="100%" height="100%" r="200" />
</clipPath>
<image xlink:href="wave.jpg" height="100%" clip-path="url(#msk1)"/>
</svg>

If you want a mask, then use a <mask>, not a <clipPath>, which as its name implies will create a clipping area from a path. What you want is for the pixels to create the mask, and that's what a <mask> does.
svg { max-height: 100vh }
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<pattern fill="white" id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" />
<rect x="10" y="10" width="10" height="10" />
</pattern>
<mask id="msk1">
<circle fill="url(#cube)" cx="50%" cy="50%" width="100%" height="100%" r="200" />
</mask>
<image xlink:href="https://picsum.photos/400/400" height="100%" mask="url(#msk1)"/>
</svg>
(Note that I did set the rectangles of the pattern white, we could also have drawn a full white rectangle behind the black ones for the same effect).

SVG image cover regardless of size/orientation

Expect the embedded snippet below to generate a screen like the picture on Firefox, etc. The two unclipped images are shown at the bottom for reference - one landscape and one portrait. Above are four demo shapes that I want to be covered by the images without really knowing anything about the image - ideally I could replace just the URLs and get all "correct" images and avoiding any math or conditions.
The patterns and images should be identical, not matched to the demo scenarios. Ultimately I need just ONE such shape in an svg template satisfying any one injected image.
I think I definitely want xMidYMid for both pattern and image. I've tried many permutations of viewBox, heights, widths, slice/meet, patternContentUnits, and patternUnits attributes.
I can't even really figure out what the "wrong" images are being scaled to. It seems like the two demos of each image are exactly the same scale (because the demo rects are all 490 in the long direction, and it's as though the short side of the image is being matched to the long side of the rect or something??)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1020 1220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern
id="patternA"
height="1"
width="1"
viewBox="0 0 1 1"
patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid slice">
<image
id="imageA"
width="1" height="1"
preserveAspectRatio="xMidYMid slice"
transform=""
xlink:href="https://images.unsplash.com/photo-1625507371147-797709a083a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</pattern>
<pattern
id="patternB"
height="1"
width="1"
viewBox="0 0 1 1"
patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid slice">
<image
id="imageB"
width="1" height="1"
preserveAspectRatio="xMidYMid slice"
transform=""
xlink:href="https://images.unsplash.com/photo-1625508200971-f63b282addb8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" />
</pattern>
<pattern
id="patternC"
height="1"
width="1"
viewBox="0 0 1 1"
patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid meet">
<image
id="imageC"
width="1" height="1"
preserveAspectRatio="xMidYMid meet"
transform=""
xlink:href="https://images.unsplash.com/photo-1625507371147-797709a083a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</pattern>
<pattern
id="patternD"
height="1"
width="1"
viewBox="0 0 1 1"
patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid meet">
<image
id="imageD"
width="1" height="1"
preserveAspectRatio="xMidYMid meet"
transform=""
xlink:href="https://images.unsplash.com/photo-1625508200971-f63b282addb8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" />
</pattern>
</defs>
<rect
style="fill:url(#patternA);stroke:black;"
x="10"
y="10"
width="490"
height="200" />
<rect
style="fill:url(#patternB);stroke:blue;"
x="510"
y="10"
width="500"
height="200" />
<rect
style="fill:url(#patternA);stroke:red;"
x="160"
y="220"
width="200"
height="490" />
<rect
style="fill:url(#patternB);stroke:green;"
x="670"
y="220"
width="200"
height="490" />
<rect
style="fill:url(#patternC);stroke:black;"
x="10"
y="720"
width="490"
height="490" />
<rect
style="fill:url(#patternD);stroke:black;"
x="510"
y="720"
width="490"
height="490" />
</svg>
Instead, the "wrong" demos should cover like this, with the image basically starting at 0x0 in the center and scaling up only until the image exactly covers the rectangle, but no further:
There are similar questions here on SO that I've already used in getting this far.

What you want can't be done I don't think. In order for the image to be scaled correctly to the shape using meet or slice, the size of the image needs to be known.
In your initial attempts, there is nothing there that gives the renderer any idea what the actual dimensions of the images are. Or even what their aspect ratios are.
For example
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1020 1220" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern
id="patternA"
height="1"
width="1"
viewBox="0 0 3977 5965"
patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid slice">
<image
id="imageA"
width="3977" height="5965"
xlink:href="https://images.unsplash.com/photo-1625507371147-797709a083a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
</pattern>
<pattern
id="patternB"
height="1"
width="1"
viewBox="0 0 3941 2217"
patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid slice">
<image
id="imageB"
width="3941" height="2217"
xlink:href="https://images.unsplash.com/photo-1625508200971-f63b282addb8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" />
</pattern>
</defs>
<rect
style="fill:url(#patternA);stroke:black;"
x="10"
y="10"
width="490"
height="200" />
<rect
style="fill:url(#patternB);stroke:blue;"
x="510"
y="10"
width="500"
height="200" />
<rect
style="fill:url(#patternA);stroke:red;"
x="160"
y="220"
width="200"
height="490" />
<rect
style="fill:url(#patternB);stroke:green;"
x="670"
y="220"
width="200"
height="490" />
<rect
style="fill:url(#patternA);stroke:black;"
x="10"
y="720"
width="490"
height="490" />
<rect
style="fill:url(#patternB);stroke:black;"
x="510"
y="720"
width="490"
height="490" />
</svg>

SVG transform --> rotate only mask not fill url image

How to transform(rotate) only mask path and not the background image (image fill) ?
Right now I get this (image rotates along with svg transform):
https://postimg.org/image/5ifcpkco5/
My SVG below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>
</svg>

You could just rotate the <image> by the same amount in the other direction.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
transform="translate(55.780723, 60.780723) rotate(90.000000) translate(-55.780723, -60.780723)"
/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>
</svg>
But you may find it easier to change the way you do the masking. Don't use a <pattern>, apply a <mask> to an <image> instead.

You can combine rotate and translate into 1 (it will run fast):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
transform="rotate(90.000000, 55.780723, 60.780723)"
/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="rotate(-90.000000, 55.780723, 60.780723) " fill="url(#img1)"></path>
</svg>

Edge not rendering SVG Symbol

I have two pairs of SVG patterns and symbols. The symbol holds and the SVG and the pattern shapes it. I use each pattern as a fill for a Circle.
This approach works fine in chrome but in edge only some svgs render in the circle. Below is an example, on chrome you should see both a shoe and a diamond. On Edge only the diamond renders even thou the approach is the same as the shoe.
CodePen Example
<svg width="660" height="600">
<defs>
<symbol xmlns="http://www.w3.org/2000/svg" id="symbol-shoe" viewBox="0 0 45 45">
</svg>
....SVG code
</svg>
<symbol xmlns="http://www.w3.org/2000/svg" id="symbol-diamond" viewBox="0 0 45 45">
<svg>
....SVG code
</svg>
</symbol>
<pattern id="pattern-diamond" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<use xmlns="http://www.w3.org/2000/svg" x="6.59" y="6.59" width="31.819" height="31.819" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-diamond" />
<pattern id="pattern-shoe" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<use xmlns="http://www.w3.org/2000/svg" x="6.59" y="6.59" width="31.819" height="31.819" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-shoe" />
</pattern>
</defs>
<circle fill="url(#pattern-shoe)" cx="150" cy="150" r="60" />
<circle fill="url(#pattern-diamond)" cx="150" cy="400" r="60" />

How to size an SVG

I am trying to create an SVG sprite.
I have set the SVG image to be 100px wide, 50px height, then offset the second by 50.
How can I set the size of the actual icon? Currently, the icon is huge and not 50px.
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>
This is what I see:

DO NOT USE TRANSFORM FOR SCALING
What you are missing is a defined viewBox.
If you do not define a viewBox the viewBox is the same size as the height and width that you defined.
So when you draw a path and some of its point are above 370 then they will be outside its container. Since your defined size is 100 width by 50 height. Any point with values higher then the size will not be drawn.
when you define a viewBox you can change the size without affecting what is drawn or not.
This is the article i allways use when i forget how to properly scale svgs: https://css-tricks.com/scale-svg/
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px"
viewBox="0 0 500 500">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>

Like this? I just added transform="scale(0.1)" attribute to the g tag to make it 10x smaller
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow" transform="scale(0.1)">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>

Resources