I have an SVG in my website which displays fine on Chrome but isn't visible on Safari and Mobile Safari.
Weirdly, if I copy and paste the SVG into a Codepen page then it works fine, so I'm not able to recreate the issue publicly.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>
Setting height 100% as an attribute fixes the issue in Safari and doesn't make it the wrong size or aspect ratio.
What is going on here? Why does this work and is a safe fix? And also why is the issue not reproducible?
UPDATE: Ive now been able to recreate. Safari hides the SVG when it has a parent div with display: flex:
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/yLPgaJx
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>
</div>
If I set the container div to display: block or set a height on the SVG then it comes back.
As comments #Evanss
Also height auto doens't make the SVG appear, but height 100% does.
width="22" height="100%"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
The snippet above doesn't render the image correctly, but if you save the svg as a separate file and open it in a browser, you'll see exactly the same image.
In the image below, the red rectangle is the border of the svg canvas with width="22" and height="100%"
As you can see, with this SVG configuration, paddings are too large. What is unacceptable and will interfere with layout
Using JavaScript isnt idea as it may cause the page to flicker
Using the JavaScript method getBBox() in the snippet console allows you to find out the physical dimensions of the svg shape
In this case, JS is not involved in the SVG rendering process and is only a reference tool.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
<script>
console.log(path.getBBox())
</script>
In the console, we can see the physical dimensions (dimensions that are given by the path of the svg shape)
"x": 0,
"y": 31.999996185302734,
"width": 448,
"height": 448
To move the image to the top left corner (this is the svgs origin) we set the value viewBox="0 32 448 448"` And to reduce the margin margins we set fixed values width="22" height="22"
Recommendations for creating and using icons
Setting both dimensions would be very time consuming as I have a lot
of icons with the same issue.
If you are using some unique icons created by a designer, then you cannot avoid the manual positioning and scaling process for each icon described above.
There is no universal solution for this case. It all depends on how the icon was drawn.
If the icon is simple, standard, then it is better to use icons drawn by professionals. There are many such resources on the web.
In this case, manual, additional processing is not required.
You can use google-fonts character font
Icons by name can be selected here
The name of your icon - Close `Fullscreen
Below is an example with minimal layout
span {
margin-left: 0.5em;
margin-top:0.5em;
transition: transform 1s ease-in-out;
}
span:hover {
transform: scale(2);
color:red;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons"> close_fullscreen </span>
You have the height of the SVG twice. In view styles hight="100%" and style="height: auto;"
safari doesn't know which style to prefer, how to scale the SVG, so it doesn't display the image.
Leave one style: width="22" height="auto"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="auto" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
Update
Try setting the values of `viewBox="0 32 448 448" according to the dimensions shown by the JS method getBBox()
And also specify fixed width and height viewport width="22" height="22"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 448" width="22" height="22" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
<path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
</path>
</svg>
<script>
console.log(path.getBBox())
</script>
In my case, adding the svg attributes width="40" and height="auto" did the trick for Safari to show the svgs correctly:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.8 503.8" width="40" height="auto">
<style>.st0{fill:currentcolor}</style>
<path d="M251.9 45.4c67.3 0 75.3.2 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.6a79.6 79.6 0 0 1 29 18.9 78.2 78.2 0 0 1 18.8 28.9c3.5 8.9 7.6 22.3 8.7 46.8 1.2 26.6 1.5 34.6 1.5 101.8s-.3 75.3-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8a83.4 83.4 0 0 1-47.8 47.8c-8.9 3.5-22.2 7.6-46.8 8.7-26.5 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.5-1.1-37.9-5.2-46.8-8.7a78.2 78.2 0 0 1-28.9-18.8 79.6 79.6 0 0 1-18.9-29c-3.4-8.9-7.5-22.2-8.6-46.8-1.3-26.5-1.5-34.5-1.5-101.8s.2-75.2 1.5-101.8c1.1-24.5 5.2-37.9 8.6-46.8a78.4 78.4 0 0 1 18.9-28.9 78.4 78.4 0 0 1 28.9-18.9c8.9-3.4 22.3-7.5 46.8-8.6 26.6-1.3 34.6-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.8 1.5S102.9 7 86.9 13.2a124.9 124.9 0 0 0-44.6 29.1 123.6 123.6 0 0 0-29.1 44.6c-6.2 16-10.5 34.3-11.7 61.2S0 183.5 0 251.9s.3 77 1.5 103.9 5.5 45.1 11.7 61.1a125.3 125.3 0 0 0 29.1 44.7 123.4 123.4 0 0 0 44.6 29c16 6.2 34.3 10.5 61.2 11.7s35.4 1.5 103.8 1.5 77-.2 103.9-1.5 45.1-5.5 61.1-11.7a128.6 128.6 0 0 0 73.7-73.7c6.2-16 10.5-34.3 11.7-61.1s1.5-35.5 1.5-103.9-.2-77-1.5-103.8-5.5-45.2-11.7-61.2a123.4 123.4 0 0 0-29-44.6 123.1 123.1 0 0 0-44.7-29.1c-16-6.2-34.3-10.5-61.1-11.7S320.3 0 251.9 0Z"></path>
<path d="M251.9 122.6a129.4 129.4 0 1 0 129.4 129.3 129.3 129.3 0 0 0-129.4-129.3Zm0 213.3a84 84 0 1 1 84-84 84 84 0 0 1-84 84Z"></path>
<circle cx="386.4" cy="117.4" r="30.2"></circle>
</svg>
Related
How can I add radial gradient in SwiftUI using provided SVG file?
All I have got is below SVG file which has gradient inforamtion:
<defs>
<clipPath id>
<path d="M1890, 0 L1890, 888 L0, 888 L0, 0L1890, 0 Z" />
</clipPath>
<radialGradient id: "grad1" cx = "0px" cy = "0px" r = "1000px" gradientTransform = "scale(1.0.0.56)" gradientUnits="userSpaceOnUse">
<stop stop-color = "rgba(0,0,0,0.6)" offset="0%" />
<stop stop-color = "rgba(0,0,0,0)" offset="100%" />
</radialGradient>
<clipPath id>
<path d="0, 0 1890, 0 1890, 888 0, 888 0, 0" />
</clipPath>
</defs>
My SwiftUI code has image which needs above gradient:
Image(room.thumbnailImage)
.resizable()
.frame(maxWidth: 400, maxHeight: 140.0)
Not later than yesterday, I managed to make an animated SVG which works flawlessly in Chrome. I tried to open it in Safari today and the animation was not working. Is there a solution to this? I have tried to do some research but most of them show CSS3 and the d:path CSS method does not work either and is actually worse because nothing shows up.
Here's my code
<svg width="1279" height="650" viewBox="0 0 1279 650" xmlns="http://www.w3.org/2000/svg">
<path d="M-138 -167.889C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V -167.889Z"
fill="#000000">
<!-- First shape and last shape in values are the same -->
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="12s"
values="
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 -167.889C117.5 424.5 1248.99 269.909 942.746 516.954C636.5 764 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1989.46 -765.777 1020.73 -167.889C52 430 1302.99 226.348 942.746 516.955C582.5 807.561 -138 458.649 -138 458.649V-167.889Z;
M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
">
</animate>
</path>
</svg>
I have tried to do some research but most of them show CSS3 and the
d:path CSS method does not work either and is actually worse because
nothing shows up.
Please see browser support d: path animations.
Unfortunately, this does not work in the specified browsers, including Safari.
Let's hope to see better support in the near future.
This answer will not solve your problem with CSS3 path animations as it is not possible, but it will make it easier with SVG animations that work in all modern browsers, including Safari.
Specifying path data: the d property:
For animation, two d property values can only be interpolated smoothly
when the path data strings contain have the same structure, (i.e.
exactly the same number and types of path data commands which are in
the same order). If an animation is specified and the lists of path
data commands do not have the same structure, then the values must be
interpolated using the discrete animation type.
To fulfill these requirements, you can use this technique
Step #1
First you need to get the shape of the curve at the starting position:
Step #2
Then, by moving the anchor points of the curve in the vector editor, we get the final shape of the curve:
Step #3
Next, we write a command to animate the curve:
<animate attributeName="d" values="path1;path2;path1" />, where
path1 - Curve shape at the start
path2 - Finish curve shape
as #Kaiido said in the comments try not to allow extra spaces before the semicolon
svg {
width:40%;
height:40%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:4;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="770" height="770" viewBox="0 0 770 770" preserveAspectRatio="xMinYMin meet" >
<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate attributeName="d"
dur="4s"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatcount="indefinite"
/>
</path>
</svg>
Option with background image and shadow
.container {
width:75%;
height:75%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
-webkit-filter: drop-shadow(4px 4px 1px black);
filter: drop-shadow(4px 4px 1px black);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 770 770" preserveAspectRatio="none" >
<image xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
</image>
<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
dur="6s"
begin="0s"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatCount="indefinite"
/>
</path>
</svg>
</div>
Border animation plus whole block size animation
.container {
width:75%;
height:75%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 770 770" preserveAspectRatio="none" >
<defs>
<filter id='shadow'>
<feGaussianBlur in='SourceAlpha' stdDeviation='2' />
<feOffset dx='3' dy='3' result='blur' />
<feMerge>
<feMergeNode in='blur' />
<feMergeNode in='SourceGraphic' />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
</image>
<path filter="url(#shadow)" d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
dur="6s"
begin="0s;an_t.end"
values="
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
repeatcount="1"
/>
<animateTransform id="an_t" attributeName="transform" type="scale" dur="12s" begin="an_d.end" values="1;0.5;0.5;1" />
</path>
</svg>
</div>
I am using vips PHP library. I want to add svg path on my image. I implemented below code for that but it's not giving me expected output. The problem is how can I set svg path according to the actual image height & width. I tried using resize and thumbnail but it doesn't give me expected output. Also I want to fill the grey color on my actual image blocks like in expected output image.
The expected output image generated using imagick
$background = Vips\Image::newFromFile($arg[1], ['access' => 'sequential']);
$svg = Vips\Image::svgload_buffer('<svg>
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" stroke="#fff" fill="transparent"/>
</svg>');
// $svg = $svg->resize(2.5);
$svg = $svg->thumbnail_image(700, ['height' => 700, 'size' => 'both']);
$image = $background->composite($svg, 'dest-in');
$image->writeToFile([$arg2], ['background' => [128, 128, 128], 'Q' => 100]);
Below is the image on which I added my svg path
My vips output image
Expected output image
Try:
#!/usr/bin/php
<?php
require __DIR__ . '/vendor/autoload.php';
use Jcupitt\Vips;
$background = Vips\Image::newFromFile($argv[1], ['access' => 'sequential']);
$width = $background->width;
$height = $background->height;
$svg = Vips\Image::svgload_buffer(<<<EOF
<svg
viewBox="0 0 300 300"
width="$width"
height="$height">
<path
d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z" stroke="#fff" fill="white"/>
</svg>
EOF);
$image = $background->colourspace('b-w')->composite($svg, 'dest-in');
$image->writeToFile($argv[2], ['background' => [128, 128, 128], 'Q' => 100]);
Associated github issue: https://github.com/libvips/php-vips/issues/109
I'm trying to apply a transform on one of the elements of a SVG but the transform affects the other children as well.
The transform applied on the path element below affects the two lines as well. How can I prevent this from happening?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="20" width="20">
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="15" x2="15" y1="0" x1="0" stroke-width="1.5" stroke="#fff" fill="none"/>
<line transform="rotate(90) " stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="15" x2="15" y1="0" x1="0" stroke-width="1.5" stroke="#fff" fill="none"/>
<path stroke="#000000" stroke-width="27" fill="#ffffff" transform="translate(10 10) scale(0.6)" d="M512 320s-64 92.65-64 128c0 35.35 28.66 64 64 64s64-28.65 64-64-64-128-64-128zm-9.37-102.94L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.76c-6.25-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.62l86.19 86.18-94.76 94.76c-37.49 37.48-37.49 98.26 0 135.75l117.19 117.19c18.74 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.87-28.12l221.57-221.57c12.5-12.5 12.5-32.75.01-45.25zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.6 58.6c12.49 12.49 32.75 12.49 45.24 0s12.49-32.75 0-45.24l-58.6-58.6 58.95-58.95 162.44 162.44-48.34 48.34z"/>
</svg>
As commented #Robert Longson, there should be no line transformation during the transformation of the patch.
Image is very small.
To see the immutability of the lines during the transformation of the path, I increased the image size width = "400" and height = "400" and painted the lines in red.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="400" width="400">
<line id="svg_1" y2="150" x2="150" y1="0" x1="0" stroke-width="1.5" stroke="red" fill="none"/>
<line transform="rotate(90)" id="svg_2" y2="15" x2="15" y1="0" x1="0" stroke-width="1.5" stroke="red" fill="none"/>
<path stroke="#000000" transform="translate(10 10) scale(0.6)" stroke-width="27" fill="#ffffff" d="M512 320s-64 92.65-64 128c0 35.35 28.66 64 64 64s64-28.65 64-64-64-128-64-128zm-9.37-102.94L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.76c-6.25-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.62l86.19 86.18-94.76 94.76c-37.49 37.48-37.49 98.26 0 135.75l117.19 117.19c18.74 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.87-28.12l221.57-221.57c12.5-12.5 12.5-32.75.01-45.25zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.6 58.6c12.49 12.49 32.75 12.49 45.24 0s12.49-32.75 0-45.24l-58.6-58.6 58.95-58.95 162.44 162.44-48.34 48.34z"/>
</svg>
Move the path to the right transform="translate(40 10)"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="400" width="400">
<line id="svg_1" y2="150" x2="150" y1="0" x1="0" stroke-width="1.5" stroke="red" fill="none"/>
<line transform="rotate(90)" id="svg_2" y2="15" x2="15" y1="0" x1="0" stroke-width="1.5" stroke="red" fill="none"/>
<path stroke="#000000" transform="translate(40 10) scale(0.6)" stroke-width="27" fill="#ffffff" d="M512 320s-64 92.65-64 128c0 35.35 28.66 64 64 64s64-28.65 64-64-64-128-64-128zm-9.37-102.94L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.76c-6.25-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.62l86.19 86.18-94.76 94.76c-37.49 37.48-37.49 98.26 0 135.75l117.19 117.19c18.74 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.87-28.12l221.57-221.57c12.5-12.5 12.5-32.75.01-45.25zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.6 58.6c12.49 12.49 32.75 12.49 45.24 0s12.49-32.75 0-45.24l-58.6-58.6 58.95-58.95 162.44 162.44-48.34 48.34z"/>
</svg>
Move the path to the down transform ="translate(10 80)"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="400" width="400">
<line id="svg_1" y2="150" x2="150" y1="0" x1="0" stroke-width="1.5" stroke="red" fill="none"/>
<line transform="rotate(90)" id="svg_2" y2="15" x2="15" y1="0" x1="0" stroke-width="1.5" stroke="red" fill="none"/>
<path stroke="#000000" transform="translate(10 80) scale(0.6)" stroke-width="27" fill="#ffffff" d="M512 320s-64 92.65-64 128c0 35.35 28.66 64 64 64s64-28.65 64-64-64-128-64-128zm-9.37-102.94L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.76c-6.25-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.62l86.19 86.18-94.76 94.76c-37.49 37.48-37.49 98.26 0 135.75l117.19 117.19c18.74 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.87-28.12l221.57-221.57c12.5-12.5 12.5-32.75.01-45.25zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.6 58.6c12.49 12.49 32.75 12.49 45.24 0s12.49-32.75 0-45.24l-58.6-58.6 58.95-58.95 162.44 162.44-48.34 48.34z"/>
</svg>
In both examples, the lines remain in the same place, only the patch is shifted.
I'm trying to mask a svg icon to change its color. Each icon's can have different colors, so I want to just load it once and change the color on the client side. This works well in all browsers except in Microsoft Edge. I created a html example to reproduce the problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg version="1.2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="icon">
<image xlink:href="./icon.svg" width="100%" height="100%" />
</mask >
</defs>
<rect fill="red" mask="url(#icon)" width="100%" height="100%" />
</svg>
</body>
</html>
The svg looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>office_building icon</title>
<path id="curve2" fill="#ffffff" d="M6080,8000 7360,8000 7360,9600 6080,9600z"/>
<path id="curve1" fill="#ffffff" d="M4160 5120l5120 0c176,0 320,144 320,320l0 4160 -1920 0 0 -1920 -1920 0 0 1920 -1920 0 0 -4160c0,-176 144,-320 320,-320zm320 2560l0 1280 640 0 0 -1280 -640 0zm2 -1928l0 1280 640 0 0 -1280 -640 0zm1280 0l0 1280 640 0 0 -1280 -640 0zm1280 0l0 1280 640 0 0 -1280 -640 0zm1280 0l0 1280 640 0 0 -1280 -640 0zm-2 1928l0 1280 640 0 0 -1280 -640 0z"/>
<path id="curve0" fill="#ffffff" d="M960 640l5120 0c176,0 320,144 320,320l0 3840 -2240 0c-353,0 -640,287 -640,640l0 4160 -2880 0 0 -8640c0,-176 144,-320 320,-320zm320 4480l0 1280 640 0 0 -1280 -640 0zm3840 -1920l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm3840 -1920l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm1280 5760l0 1280 640 0 0 -1280 -640 0zm-1280 0l0 1280 640 0 0 -1280 -640 0zm1280 -1920l0 1280 640 0 0 -1280 -640 0z"/>
</svg>
If this example is opened in Edge, nothing is showing. In all other browsers the icon is correctly shown in red.
In my project the svg's are loaded via service, but this is not the problem as you can see in my example. Also it must be loaded via service, because the icons can change at a later time.
Switching to png, which would then work, is currently not an option.
Is there a way to make this work in Edge with svg's or is it just not possible currently?
Edge does not support svg masks by MDN documentation at the moment.