Not able to set SVG as a CSS background image - html

I have an SVG that I want to set as a background image for an input tag so that I could use an image as a radio button. I've been following many guides but nothing seems to work. I'm suspecting that it has to be the SVG content itself.
Here's the SVG:
<svg width="80px" height="80px" viewBox="473 123 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="face_sad" opacity="0.8" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(473.000000, 123.000000)">
<path d="M40,0 C17.90861,-1.3527075e-15 2.705415e-15,17.90861 0,40 C-2.705415e-15,62.09139 17.90861,80 40,80 C62.09139,80 80,62.09139 80,40 C80,29.3913404 75.7857264,19.2171839 68.2842712,11.7157288 C60.7828161,4.21427361 50.6086596,6.49593051e-16 40,0 Z M40,77.6 C19.2340934,77.6 2.4,60.7659066 2.4,40 C2.4,19.2340934 19.2340934,2.4 40,2.4 C60.7659066,2.4 77.6,19.2340934 77.6,40 C77.5779535,60.7567678 60.7567678,77.5779535 40,77.6 L40,77.6 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M40,49.2 C27.2,49.2 20.16,59.008 19.408,60.128 C19.1388619,60.481731 19.0872921,60.9552533 19.2739762,61.3586265 C19.4606604,61.7619997 19.8550164,62.0291441 20.2988593,62.0529021 C20.7427021,62.0766601 21.1633224,61.8531397 21.392,61.472 C22.08,60.464 28.408,51.6 40,51.6 C51.592,51.6 57.92,60.464 58.608,61.472 C58.9937796,61.9790342 59.7085433,62.096207 60.2360188,61.7388849 C60.7634943,61.3815628 60.9197839,60.6743215 60.592,60.128 C59.84,59.008 52.8,49.2 40,49.2 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="29.616" cy="28.8" rx="4" ry="4"></ellipse>
<ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="50.384" cy="28.8" rx="4" ry="4"></ellipse>
<path d="M54.76,35.04 C54.6,34.88 54.44,34.8 54.2,34.8 C53.96,34.8 53.8,34.88 53.72,35.04 C53.64,35.12 52.44,36.56 51.16,38.32 C49.48,40.8 48.6,42.72 48.6,43.92 C48.6,46.88 51.08,49.2 54.2,49.2 C57.24,49.2 59.8,46.8 59.8,43.92 C59.8,42.72 58.92,40.88 57.24,38.4 C56.04,36.56 54.76,35.12 54.76,35.04 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</svg>
and my CSS for the input:
input#bad-choice {
background: url(../assets/img/svgs/emoji-bad.svg);
}
I've tried adding thing like no-repeat left top in background or even changing it to background-image, but nothing seems to work. I even tried converting it to data URI but that didn't seem to work neither. Any tips would be greatly appreciated. Thank you.

Related

SVG fill of nested pattern

I'm currently working on nested pattern in svg where the first pattern is used to fill the second shape which is used to fill the third.
The following code snippet run perfectly on a website like w3schools, but once converted to a file and to use on a browser it only shows an empty box, with no error code.
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
<pattern id="a" viewBox="0 0 12 12" width="135%" height="150%">
<g stroke="black" stroke-width="1">
<circle cx="6" cy="6" r="4" fill="red"/>
<circle cx="6" cy="6" r="2" fill="yellow"/>
</g>
<animate attributeName="x" from="0" to="1.35" dur="5s" repeatCount="indefinite"/>
</pattern>
<pattern id="b" viewBox="0 0 50 50" width="100%" height="100%">
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)"/>
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)" transform="scale(-1,1) rotate(90 50 50) translate(0,100)"/>
</pattern>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(90 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(180 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(270 50 50)"/>
<rect width="100" height="100" fill="transparent" stroke="black" stroke-width="3"/>
</svg>
Here is the following output:
I tried to use diverse way to use the pattern "a" like using <defs> or <use xlinks:href>, the code still run but it doesn't give the expected output or any errors. I tried using diverse browser (Chrome, Opera, Edge, Firefox), but they all give the same empty box. When I copy and paste the code while inspecting the element, to the w3school website, it all works fine.

Border radius in SVG

I have the following SVG:
<svg
id="Capa_1"
enable-background="new 0 0 80 70"
height="64"
width="64"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g>
<path
d="m256 470-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
fill="#00C7B2"
/>
</g>
<path
d="m256 480 195-131.976v-380.024h-195z"
fill="#00957A"
/>
</g>
</svg>
I want to get border rounded or set border-radius. Like this:
How can I achieve that rounded corner effect? Please look into this.

I am not sure there is way to round SVG in HTML (like apply CSS?), but you can use an SVG to the editor to the edits. I use Figma to edit this, but any vector-based graphic solution should be fine I guess.
<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>

Don't use a text editor to do that. Use an SVG editor like Inkscape. This is particularly important in this case because there is no easy way to make a <path> round. If it would be a box then it would be possible. Opening it in Inkscape and converting the corners into Beziers you can achieve something this:
<svg
height="100"
width="100"
viewBox="0 0 1000 1000"
version="1.1"
id="svg4690">
<g
id="g4663">
<g
id="g4659"
transform="translate(91.89342,225.31329)">
<path
d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
id="path4657"
inkscape:connector-curvature="0"
style="fill:#00c7b2"
sodipodi:nodetypes="ccczcccccccc" />
</g>
<path
d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
id="path4661"
inkscape:connector-curvature="0"
style="fill:#00957a"
sodipodi:nodetypes="ccczccc" />
</g>
</svg>
Also, note that the original SVG is incorrectly positioned and the top of the green and dark-green areas do not match:
However in the snippet this is not visible because this area is out of the viewbox. This is another good reason to use Inkscape.
Another option to make round corners is to use boxes. Boxes can be rounded through the ry attribute. Here are 3 boxes with mildly rounded, rounded and extra rounded settings. You only need to position them in the right place.
<svg
height="100"
width="100"
viewBox="0 0 1000 1000"
version="1.1"
id="svg4690">
<g
id="g4663">
<g
id="g4659"
transform="translate(91.89342,225.31329)">
<path
d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
id="path4657"
inkscape:connector-curvature="0"
style="fill:#00c7b2"
sodipodi:nodetypes="ccczcccccccc" />
</g>
<path
d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
id="path4661"
inkscape:connector-curvature="0"
style="fill:#00957a"
sodipodi:nodetypes="ccczccc" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect4694"
width="81.383575"
height="81.383575"
x="170.25067"
y="196.41048"
ry="8.6862621" />
<rect
ry="13.363494"
y="291.82568"
x="170.25067"
height="81.383575"
width="81.383575"
id="rect4696"
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="rect4698"
width="81.383575"
height="81.383575"
x="170.25067"
y="386.77319"
ry="33.007805" />
</g>
</svg>

SVG doesn't display correctly

Here's the how my SVG is supposed to look like.
below is how it looks when I code it in my web.
I'm not really sure what's going on here. Any help would be much appreciated. Below is my SVG code. Thanks in advance.
<svg class="product-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
<defs>
<style>.cls-1,.cls-2{fill:#fff;}.cls-1,.cls-2,.cls-4,.cls-5{stroke:#333;stroke-miterlimit:10;}.cls-1{stroke-width:3.79px;}.cls-2{stroke-width:5px;}.cls-3{fill:#333;}.cls-4,.cls-5{fill:none;stroke-linecap:round;}.cls-4{stroke-width:3px;}.cls-5{stroke-width:2.27px;}</style>
</defs>
<circle class="cls-1" cx="460.7" cy="282.87" r="48.53"/>
<circle class="cls-2" cx="519.36" cy="325.31" r="64.01"/>
<rect class="cls-3" x="262.17" y="399.01" width="384.48" height="31.32" rx="15.66"/>
<path class="cls-3" d="M284.36,441.13,301.1,552.91a45,45,0,0,0,44.51,38.34h217.6a45,45,0,0,0,44.5-38.34l16.74-111.78Z"/>
<path class="cls-3" d="M453,392.53h-82.8c0-9.35,3.12-21.17,8.36-28.06a0,0,0,0,0,0,0,41,41,0,0,1,32.67-16.19H412a40.87,40.87,0,0,1,29,12C448.43,367.71,453,381.19,453,392.53Z"/>
<path class="cls-3" d="M436.92,302.87a13.9,13.9,0,0,1-15.47,21.65l-8.06,17.27L410.85,284l-3.54,55.67-7.06-15.13a13.92,13.92,0,0,1-4.44.74,13.53,13.53,0,0,1-1.81-.12,13.9,13.9,0,0,1-9.22-22.27q-.36-.31-.69-.66a16.43,16.43,0,0,1,11.25-28,17.85,17.85,0,0,1,32.62.12,16.44,16.44,0,0,1,9,28.52Z"/>
<path class="cls-3" d="M366.71,392.53H288.56l-4-7.39a41.4,41.4,0,0,1,24.28-53.27c.82-.31,1.64-.59,2.47-.84a41.62,41.62,0,0,1,26.77.94C364.37,341.79,366.71,392.53,366.71,392.53Z"/>
<path class="cls-3" d="M391.58,348.27c-14.7,3.83-23,19.65-23,19.65s-9.68-51-51.63-41.93c1.2-6.61,2.68-12.13,4.41-14.4a38.86,38.86,0,0,1,31-15.34H353a38.71,38.71,0,0,1,25.09,9.18q.33.35.69.66A13.9,13.9,0,0,0,388,328.36C389.39,335,390.92,342.11,391.58,348.27Z"/>
<path class="cls-3" d="M381.81,241.65a15.59,15.59,0,0,0-13.64-15.47,16.94,16.94,0,0,0-30.93-.12,15.57,15.57,0,0,0-10,27.15,13.18,13.18,0,0,0,10.45,21.23,13.32,13.32,0,0,0,4.21-.7l6.69,14.34L352,235.31l2.41,54.79L362,273.74a13.19,13.19,0,0,0,14.66-20.53A15.5,15.5,0,0,0,381.81,241.65Z"/>
<path class="cls-3" d="M317.43,267.16a16.46,16.46,0,0,0-19.2-10.26,17.86,17.86,0,0,0-30.6,11.31,16.43,16.43,0,0,0,.14,30.53,13.9,13.9,0,0,0,18.17,17.11,13.67,13.67,0,0,0,3.9-2.25l11.91,11.71-16.18-53.39,22.63,53.26,1.5-19a13.7,13.7,0,0,0,4.41-.86,13.92,13.92,0,0,0,2.5-24.84A16.38,16.38,0,0,0,317.43,267.16Z"/>
<path class="cls-3" d="M559.1,334.45a52.33,52.33,0,0,0-10.77,1.11,11.64,11.64,0,0,0-9.16,10.58,20.41,20.41,0,0,0,7.43-2.49,1.5,1.5,0,0,1,1.49,2.6,23.18,23.18,0,0,1-23.09,0,1.5,1.5,0,1,1,1.49-2.6,20.66,20.66,0,0,0,5,2,11.73,11.73,0,0,0-9.72-10.5,53,53,0,0,0-8.78-.73,52.3,52.3,0,0,0-52,58.08H611.1a54.68,54.68,0,0,0,.32-5.76A52.31,52.31,0,0,0,559.1,334.45Z"/>
<path class="cls-4" d="M535.58,351.74a54.85,54.85,0,0,1,2.64-23.52A52.17,52.17,0,0,1,543,318.16"/>
<path class="cls-3" d="M533.18,301.9c-.09-.11-.19-.21-.28-.31-7.58-8.15-15.6-5.68-23.23-5.15a28.59,28.59,0,0,1-3.33.08c-20.51-.81-21-14.8-21-14.8s-6.13,24,10.4,40.7c13.35,13.48,30.33,10,38,1-18.15-2.45-25.58-9.82-25.58-9.82s5.16,1.91,16.59,3.35c2.19.27,4.37.44,6.46.53a32.26,32.26,0,0,1,5.28.63S537.19,306.68,533.18,301.9Z"/>
<polygon class="cls-3" points="372.55 318.16 372.31 318.16 372.44 317.77 372.55 318.16"/>
<polygon class="cls-3" points="357.37 317.77 357.5 318.16 357.26 318.16 357.37 317.77"/>
<path class="cls-4" d="M524.8,274.42a54.68,54.68,0,0,0-2.64-23.52,52.15,52.15,0,0,0-4.75-10.06"/>
<path class="cls-3" d="M527.2,224.58c.09-.11.19-.21.29-.31,7.58-8.15,15.59-5.68,23.22-5.15a28.59,28.59,0,0,0,3.33.08c20.52-.81,21-14.8,21-14.8s6.13,24-10.39,40.7c-13.35,13.48-30.34,10-38,1,18.15-2.45,25.58-9.82,25.58-9.82s-5.16,1.91-16.59,3.35c-2.19.27-4.36.44-6.46.53a32,32,0,0,0-5.27.63S523.19,229.36,527.2,224.58Z"/>
<path class="cls-5" d="M463.65,244.29a41.6,41.6,0,0,1,2-17.84,38.84,38.84,0,0,1,3.61-7.62"/>
<path class="cls-3" d="M461.83,206.49l-.22-.23c-5.75-6.18-11.82-4.31-17.61-3.9a23.68,23.68,0,0,1-2.52.06c-15.56-.62-15.93-11.23-15.93-11.23s-4.64,18.22,7.89,30.86c10.12,10.22,23,7.58,28.82.77-13.76-1.85-19.4-7.45-19.4-7.45s3.92,1.45,12.58,2.54c1.66.21,3.31.34,4.9.41a23.37,23.37,0,0,1,4,.48S464.87,210.12,461.83,206.49Z"/>
</svg>

Remove the value of the class attribute in the svg element.
Looks like you have defined a style for that class and that is causing the svg to have a border specified.
So:
<svg class=“product-icon”
Becomes
<svg class=“”
Or you can leave the class in there and revisit the product-icon style definition and correct it. Not sure what it’s made of but perhaps removing the border property if it has it specified...
Also check if you have any other style rules that are targeting the svg element...
Inspect the the svg element in developer tools and check what styles are being applied. The actual svg code is correct.

WordPress not showing the SVG stroke path

<svg height="80" width="300">
<g fill="none" stroke="black"
stroke-width="6">
<path stroke-linecap="butt" d="M5 20
l215 0" />
<path stroke-linecap="round" d="M5
40 l215 0" />
<path stroke-linecap="square" d="M5
60 l215 0" />
</g>
</svg>
Ok so I wrote this code in my WordPress post and nothing showed up. But there's no problem when I run it in a simple HTML file format . Can anyone tell why this thing is not working in WordPress...

Why is the emoji not displayed in the SVG in Chrome?

The emoji in the SVG correctly displays in both Safari and Firefox. In Chrome and Opera it is not displayed at all. What do I need to do to have the emoji also display in Chrome and Opera?
<svg id="SVGbgcolor1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 144 144" alt="SVG Bitcoin Pictograph">
<g>
<text id="flag" x="0" y="136" font-family="courier" font-size="144">🇺🇸</text>
<g id="SVGbgcolor2" transform="matrix(2.403433 0 0 2.403433 133.9157 -.2672786)" fill="#ffff11" stroke="black">
<path d="m-29.67313 32.30631c-0.0078 3.964844-0.01563 7.929687-0.02344 11.89453 4.250716-0.05757 9.512582 0.672079 12.68164-2.011719 2.020462-1.485994 1.7925-8.830264-2.508482-9.337212-3.355145-0.489526-6.76593-0.500321-10.14972-0.5456z"></path>
<path d="m-29.66532 15.95475 0.09375 9.896485c3.94585-0.118673 9.206302 0.331177 11.81609-1.285296 2.052885-1.630257 1.024997-8.44682-3.021329-8.344769-2.954353-0.25838-5.925276-0.251126-8.888509-0.26642z"></path>
<path d="m-56.63264-1.090505-0.08727 63.0228 62.6767-0.05623-0.033283-62.95665zm22.46341 6.233736h7.091797v4.530687h4.558594l-0.147496-4.383191h7.132551l-0.05164 4.411386c5.97362 0.3102366 11.03635 8.194718 8.783373 13.20227-1.403588 2.992536-4.061669 5.443424-7.199219 6.509766 4.270871 0.752585 9.289582 2.353423 9.201172 8.21875 0.4854457 8.953997-3.897788 10.18234-10.63281 13.90966v4.358297h-7.089844v-4.379284h-4.554687v4.52678h-7.091797v-4.52678h-10.81445l-0.05977-5.75189c1.541302 0.125363 4.914709-0.106688 4.939639-2.629801-0.03614-7.277082 0.06346-18.24454-0.02479-25.51909-0.172768-2.90147-4.855077-2.632184-4.855077-2.632184v-5.314695h10.81445z"></path>
</g>
</g>
<circle id="rounded1" cx="72" cy="72" r="72" stroke="black" stroke-width="2" fill="transparent"></circle>
<rect x="0" y="0" width="144" height="144" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0"></rect>
</svg>

Worked it out. Needed to change font-size to 71 or less (font-size="71"). It seems that in Chrome 55.0.2883.95 greater font-sizes result in nothing being rendered. Though the emoji is present in code as can be seen when using toDataURL.