Svg not render <path> when added css all:revert - css

I'm using 3rd party UI library, which is includes such rule:
* {all: revert;}
then I add svg, but it's not renders, since width and height of <path> is equal to 0.
I have no ability to remove all: revert; in code (only override).
Here is demo:
https://codesandbox.io/s/suspicious-cori-4pgfh
What style need to add to <path> to make it visible?
UPD: Here code snippet
body {
font-family: sans-serif;
}
/* this cannot be removed */
body * {
all: revert; /* this added by 3-rd party library */
}
.svg-wrapper * {
display: block;
width: 100px;
height: 100px;
}
.svg-wrapper path {
display: block;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="svg-wrapper">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>
</svg>
</div>
</body>
</html>
UPD: When override with body * { all: initial; } - doesn't work


It's the d data (which is also a CSS property now) that gets reset by all: revert;, and because CSS properties always override SVG attributes, your <path> doesn't contain a shape anymore.
The only fix I could find is to run a script that copies the d SVG attribute into the d CSS property on all <path> elments:
document.querySelectorAll('path').forEach(path => {
const data = path.getAttribute('d').replace(/\s+/g, ' '),
cssData = `path("${data}")`;
path.style.d = cssData;
});
document.querySelectorAll('path').forEach(path => {
const data = path.getAttribute('d').replace(/\s+/g, ' '),
cssData = `path("${data}")`;
path.style.d = cssData;
});
body {
font-family: sans-serif;
}
/* this cannot be removed */
body * {
all: revert; /* this added by 3-rd party library */
}
.svg-wrapper * {
display: block;
width: 100px;
height: 100px;
}
.svg-wrapper path {
display: block;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="svg-wrapper">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>
</svg>
</div>
</body>
</html>


*:not(path) {all: revert;} will apply the revert but keep the SVG path intact

Related

How to size text in an SVG element

I am trying to put text inside SVG so we can use custom fonts in PowerApps
Sp I have an image with the below definition in the Image property (I've cut out the Base 64 font definition of about 1000 lines:
"data:image/svg+xml," & // You need to include this data uri to indicate that the code herein is an SVG image
EncodeUrl(
"<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'>
<style>
#font-face {
font-family: 'BHF Beats';
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAFHUAA8AAAAA21AAAFFyAAEAAAAAAAAAAAAAAAAAA
{TL:DR}
4q/Jed/AdY8h4kAAHjaY2BgYGQAgqtL1DlA9LU2kwwYDQA7fwWaAAA=) format('woff');
font-weight: bold;
font-style: normal;
}
.BHFBeats { font: 128px BHF Beats;fill: white }
</style>
<text x='21' y='180' class='BHFBeats'>ExpenSys Claimant Setup Administration Module</text>
</svg>"
)
with those settings this is what I can see (in PowerApps Studio:
but what I am trying to achieve is similar to what we can get using a simple Label control as below:
so what I want is the text to be the right size, and start at the far-left, and show all the text
I've tried many different settings for font size, view-box size but cannot get it right...
Where am I going wrong?
More info:
The label control in the second image has a height of 50 and a width if 823

Try adding a preserveAspectRatio attribute to your SVG.
<svg preserveAspectRatio="xMinYMid meet" ...
It will ensure the contents of your SVG always start at the left end of the parent container.
Update
For example. With and without the preserveAspectRatio attribute.
div {
width: 100%;
height:100px;
background-color: red;
}
svg {
width: 100%;
height: 100%;
}
<div>
<svg viewBox="0 0 1291 338" xmlns="http://www.w3.org/2000/svg">
<style>
.BHFBeats { font: 128px "BHF Beats";fill: white }
</style>
<text x="21" y="180" class="BHFBeats">ExpenSys Claimant Setup Administration Module</text>
</svg>
</div>
<br/><br/>
<div>
<svg viewBox="0 0 1291 338" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
<style>
.BHFBeats { font-size: 128px; fill: white }
</style>
<text x="21" y="180" class="BHFBeats">ExpenSys Claimant Setup Administration Module</text>
</svg>
</div>

I would calculate the size of the text using javascript like so:
let font_size = 128;
// while the text length is bigger than needed
while(txt.getComputedTextLength() > 1291 - 21 ){//1291 is the width of the svg canvas taken fron the viewBox. 21 is the offset of the text as in `x="21"`
//reduce the font size
font_size -=.25;
//reset the font size
txt.style.fontSize = font_size+"px";
}
svg {
border: 1px solid #ccc;
}
body {
background: black;
}
<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'>
<style>
#font-face {
font-family: 'BHF Beats';
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAFHUAA8AAAAA21AAAFFyAAEAAAAAAAAAAAAAAAAAA
{TL:DR}
4q/Jed/AdY8h4kAAHjaY2BgYGQAgqtL1DlA9LU2kwwYDQA7fwWaAAA=) format('woff');
font-weight: bold;
font-style: normal;
}
.BHFBeats { font: 128px BHF Beats;fill: white }
</style>
<text id="txt" x='21' y='180' class='BHFBeats'>ExpenSys Claimant Setup Administration Module</text>
</svg>

Why won't my svg animation work?

I have this svg that I've been trying to animate for like two weeks now ...
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg1"
version="1.1"
viewBox="49.595489 30.040314 84.135223 84.305336"
height="84.305336mm"
width="84.135223mm">
<defs>
<style>
.logo{
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<path class="logo"
id="logo"
d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
I followed instructions in this video. Even tried adding an extra style line like he did in the video by copy pasting style from inside path. I'm not sure it makes a difference where those attributes are.
<style type = "txt/css">
.logo{fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1}
but it didn't work :( If i leave the line above and remove style from path, all the attributes get lost, so I guess it can't reference them the way he does in the video. I'm not sure what's wrong this time.
the html source code is just
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equip="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> SVG Line Animation Demo</title>
</head>
<body>
<div style = "text-align: center; padding: 150px 0;">
<object>
<embed src="path.svg">
</object>
</div>
</body>
</html>

The stroke-dasharray:none that you have set on the path overrides and prevents the animation. Removing that fixes it.
I've also removed the webkit bits so it should work on more browsers now.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" version="1.1" viewBox="49.595489 30.040314 84.135223 84.305336" height="84.305336mm" width="84.135223mm">
<defs>
<style>
.logo{
stroke-dasharray: 800;
stroke-dashoffset: 0;
animation: dash 2s linear forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<path class="logo"
id="logo"
d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</svg>

How to make specific shaped divs

I am working on a project that has a map on it. Each section of the map highlights as you hover over it, and it hyperlinks to a corresponding website. On some of the areas, I can just size a div and absolutely place it with overlaying background image set to opacity:0. On Hover I change the opacity to 1 and all is good. Some of the other areas are too specific of a shape, so I've used transform to rotate the div, but I can't get specific enough. I'm getting too much overlap. Maybe I'm going about this the wrong way. I'm looking for any help. I've tried many things and I'm in a rut. Here is where I'm at now.
https://jsfiddle.net/4w3emy4o/2/
<div class="erieBasin">
<div id="essex"></div>
<div id="thames"></div>
<div class="kettle"></div>
<div class="close"></div>
</div>
.erieBasin {
position:absolute;
width:900px;
height:589px;
z-index:100;
background-image: url(http://i67.tinypic.com/2h4b23k.jpg);
}
#essex {
position:absolute;
top:270px;
left:275px;
width:91px;
height:72px;
background-image: url(http://i63.tinypic.com/28s6cew.jpg);
opacity: 0;
}
#essex:hover {
opacity:1;
}
#thames {
position:absolute;
top:222px;
left:325px;
width:215px;
height:60px;
background-image: url(http://i66.tinypic.com/2nl8dwx.jpg);
-ms-transform: rotate(-32deg); /* IE 9 */
-webkit-transform: rotate(-32deg); /* Safari */
transform: rotate(-32deg);
opacity: 0;
}
#thames:hover {
opacity:1;
}

Although I like freestock's answer, I want to suggest a different approach.
There is an element, that is specifically designed for such purposes: map. You can define polygons with it.
The basic usage is:
<img src="shapes.png" usemap="#shapes" >
<map name="shapes">
<area shape=rect coords="50,50,100,100">
<area shape=rect coords="25,25,125,125" href="red.html" >
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html">
</map>
example taken from the w3 link

SVG alternative:.
1- SVG Clip-path On this first snippet there's a svg clip-path ( helper: clip-path-generator ) applied on an image and a blury clone without the clip-path, both inside a container. A low opacity color layer was added to let the highlight even more clear. The clip-path area gets highlighted on :hover
ps.1: made with the polygonal lasso tool quick and careless since its just an example.
ps.2: on this clip-path generator, you can click and drag a picture from your Desktop into the canvas. You can easily find more clip-path generators around the web like this one.
ps.3: you can build svg shapes on graphic softwares (like Inkscape or Adobe Illustrator) instead.
body {
margin: 0;
background: lavender;
}
.clipped {
cursor: pointer;
}
.clipped:hover {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
.container {
position: relative;
vertical-align: bottom;
display: inline-block;
border: 4px solid indigo;
box-sizing: border-box;
overflow: hidden;
}
.color {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-color: red;
opacity: 0.2;
}
.back {
-webkit-filter: blur(2px); /* Chrome, Safari, Opera */
filter: blur(2px);
}
.clipped {
position: absolute;
top:0;
left:0;
}
#clip1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(578px 230px,581px 228px,584px 228px,587px 230px,591px 232px,597px 236px,618px 239px,624px 238px,642px 241px,667px 245px,674px 245px,677px 243px,666px 238px,661px 240px,653px 238px,647px 233px,643px 234px,627px 234px,624px 230px,634px 223px,639px 225px,638px 221px,646px 213px,652px 207px,656px 204px,660px 206px,668px 203px,678px 200px,686px 203px,690px 199px,715px 195px,713px 192px,714px 186px,711px 188px,705px 188px,694px 185px,692px 180px,688px 183px,686px 178px,672px 175px,664px 181px,663px 176px,659px 175px,642px 172px,641px 170px,634px 168px,634px 160px,631px 157px,625px 157px,625px 155px,619px 155px,597px 158px,587px 167px,589px 171px,584px 173px,574px 183px,574px 186px,567px 188px,565px 189px,577px 190px,579px 193px,578px 196px,575px 196px,569px 202px,567px 206px,562px 210px,569px 215px,572px 217px,574px 226px);
/*Firefox*/
clip-path: url("#clipPolygon");
/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTU3OCwyMzAgTDU4MSwyMjggNTg0LDIyOCA1ODcsMjMwIDU5MSwyMzIgNTk3LDIzNiA2MTgsMjM5IDYyNCwyMzggNjQyLDI0MSA2NjcsMjQ1IDY3NCwyNDUgNjc3LDI0MyA2NjYsMjM4IDY2MSwyNDAgNjUzLDIzOCA2NDcsMjMzIDY0MywyMzQgNjI3LDIzNCA2MjQsMjMwIDYzNCwyMjMgNjM5LDIyNSA2MzgsMjIxIDY0NiwyMTMgNjUyLDIwNyA2NTYsMjA0IDY2MCwyMDYgNjY4LDIwMyA2NzgsMjAwIDY4NiwyMDMgNjkwLDE5OSA3MTUsMTk1IDcxMywxOTIgNzE0LDE4NiA3MTEsMTg4IDcwNSwxODggNjk0LDE4NSA2OTIsMTgwIDY4OCwxODMgNjg2LDE3OCA2NzIsMTc1IDY2NCwxODEgNjYzLDE3NiA2NTksMTc1IDY0MiwxNzIgNjQxLDE3MCA2MzQsMTY4IDYzNCwxNjAgNjMxLDE1NyA2MjUsMTU3IDYyNSwxNTUgNjE5LDE1NSA1OTcsMTU4IDU4NywxNjcgNTg5LDE3MSA1ODQsMTczIDU3NCwxODMgNTc0LDE4NiA1NjcsMTg4IDU2NSwxODkgNTc3LDE5MCA1NzksMTkzIDU3OCwxOTYgNTc1LDE5NiA1NjksMjAyIDU2NywyMDYgNTYyLDIxMCA1NjksMjE1IDU3MiwyMTcgNTc0LDIyNiB6Ii8+CiAgPC9jbGlwUGF0aD4KICA8cGF0aCBpZD0ic3ZnTWFzayIgZD0iTTU3OCwyMzAgTDU4MSwyMjggNTg0LDIyOCA1ODcsMjMwIDU5MSwyMzIgNTk3LDIzNiA2MTgsMjM5IDYyNCwyMzggNjQyLDI0MSA2NjcsMjQ1IDY3NCwyNDUgNjc3LDI0MyA2NjYsMjM4IDY2MSwyNDAgNjUzLDIzOCA2NDcsMjMzIDY0MywyMzQgNjI3LDIzNCA2MjQsMjMwIDYzNCwyMjMgNjM5LDIyNSA2MzgsMjIxIDY0NiwyMTMgNjUyLDIwNyA2NTYsMjA0IDY2MCwyMDYgNjY4LDIwMyA2NzgsMjAwIDY4NiwyMDMgNjkwLDE5OSA3MTUsMTk1IDcxMywxOTIgNzE0LDE4NiA3MTEsMTg4IDcwNSwxODggNjk0LDE4NSA2OTIsMTgwIDY4OCwxODMgNjg2LDE3OCA2NzIsMTc1IDY2NCwxODEgNjYzLDE3NiA2NTksMTc1IDY0MiwxNzIgNjQxLDE3MCA2MzQsMTY4IDYzNCwxNjAgNjMxLDE1NyA2MjUsMTU3IDYyNSwxNTUgNjE5LDE1NSA1OTcsMTU4IDU4NywxNjcgNTg5LDE3MSA1ODQsMTczIDU3NCwxODMgNTc0LDE4NiA1NjcsMTg4IDU2NSwxODkgNTc3LDE5MCA1NzksMTkzIDU3OCwxOTYgNTc1LDE5NiA1NjksMjAyIDU2NywyMDYgNTYyLDIxMCA1NjksMjE1IDU3MiwyMTcgNTc0LDIyNiB6IiAgLz4KPC9zdmc+) no-repeat;
}
<div class=container>
<img class=back src="http://i67.tinypic.com/2h4b23k.jpg" alt=img>
<div class=color></div>
<img id=clip1 class=clipped src="http://i67.tinypic.com/2h4b23k.jpg" alt=img onClick="window.location.href = 'http://erca.org/'">
</div>
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="578 230,581 228,584 228,587 230,591 232,597 236,618 239,624 238,642 241,667 245,674 245,677 243,666 238,661 240,653 238,647 233,643 234,627 234,624 230,634 223,639 225,638 221,646 213,652 207,656 204,660 206,668 203,678 200,686 203,690 199,715 195,713 192,714 186,711 188,705 188,694 185,692 180,688 183,686 178,672 175,664 181,663 176,659 175,642 172,641 170,634 168,634 160,631 157,625 157,625 155,619 155,597 158,587 167,589 171,584 173,574 183,574 186,567 188,565 189,577 190,579 193,578 196,575 196,569 202,567 206,562 210,569 215,572 217,574 226">
</polygon>
</clipPath>
</svg>
2- SVG shape Second snippet, more simple: single pic without filters/clip-path plus a solid svg shape made on Adobe Illustrator with the pen tool:
#container {
position: relative;
}
svg {
position: absolute;
top: 0;
left: 0;
}
polygon {
cursor: pointer;
opacity: 0.6;
fill: green;
}
polygon:hover {
opacity: 0.8;
fill: red;
}
<div id=container>
<img src="http://i67.tinypic.com/2h4b23k.jpg" alt=pic>
<svg x="0px" y="0px" width="900px" height="589px" viewBox="0 0 900 589">
<polygon onClick="window.location.href = 'http://erca.org/'" points="364.333,317.333 357,311 348,310.667 347,307.667 349.333,305.667 352.333,305 351.667,302.333
349.667,300.667 351,292.667 353,291 356.667,292.667 357.333,295 359.333,283.667 369,276.333 370.667,269.667 371,258.333
374.667,260 384,257.333 391.333,253.333 392.333,256.667 396.667,253.333 399.667,257 406,254 406.667,251.333 413.667,246.333
416.667,246.333 419.333,244.667 419.333,239.333 425,239.333 426,233 435,228.333 438.667,231 442,227 451.334,221.333 456,221
455,209.333 461.667,208 463.334,206 463.334,200.333 472,199 476.667,197.333 476.334,195 473.667,194 480.334,193 487.334,191
487.334,187 489.667,184 492.334,187 497,184.333 506,183 510.667,184 516.667,190.667 510,188.333 505.334,189.667 505,196
508.334,196.667 511.334,199 507.667,202.667 509,205 510.334,206.667 515.667,205.667 523,206.667 523.667,208 517.334,213.333
515,215.333 513,215.333 511.667,219.333 507.667,218.667 509,224 506,226.667 504.334,229.333 501,231.333 493.334,231.333
496,232.667 492.667,233.667 492.334,235.667 486.667,236.667 481,242.333 478,243.333 473,249.333 468,252.333 462,256.333
457.667,261 448.667,267.333 447.667,272.333 448,277.333 446,279.667 445,283.667 445,286.333 441.333,288.667 439.333,287
440.667,281 438.667,280.667 435,280.667 433,282.667 432.667,287 428.333,286.333 422.667,286.667 410.667,291 399.667,297
399.667,298.333 395.333,299.333 384.667,305.333 380.667,307 375.667,310.333 371,313 "/>
</svg></div>
3- Multiple SVG shapes On this 3rd snippet theres several SVG paths automatically generated by the Adobe Illustrator 'trace image' feature.
#container {
position: relative;
}
svg {
position: absolute;
top: 0;
left: 0;
}
path {
cursor: pointer;
opacity: 0.6;
fill: green;
}
path:hover {
opacity: 0.8;
fill: red;
}
<div id=container>
<img src="http://i67.tinypic.com/2h4b23k.jpg" alt=pic>
<svg x="0px" y="0px"
width="900px" height="589px" viewBox="0 0 900 589" >
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M621,1c-0.636,1.399-0.761,2.768-0.419,4.341
c1.288,5.921-1.485,9.547-7.905,10.679c-0.95,0.167-2.531,0.377-2.684,0.898c-1.604,5.508-4.256,2.165-6.962,1.147
c-4.679-1.76-5.131,3.151-6.943,5.281c-3.527,4.146-5.729,9.505-11.569,11.264c-1.419,0.428-1.953,1.404-2.299,2.891
c-0.71,3.05-2.289,5.953-2.643,9.017c-0.671,5.813-4.39,5.419-8.105,4.179c-2.642-0.881-3.365-0.332-3.359,2.167
c0.009,4.188-3.457,7.866-1.296,12.546c0.842,1.823,0.274,4.33-3.159,5.473c-2.983,0.992-3.423,4.852-2.261,7.854
c1.438,3.717-1.079,4.791-3.444,5.985c-2.556,1.289-5.006,2.491-7.343-0.882c-2.991-4.316-6.322-8.387-10.6-11.637
c-3.953-3.005-12.177-2.994-15.286,0.469c-0.489,0.545-0.911,1.771-0.633,2.284c1.83,3.369,0.619,7.16,1.848,10.807
c1.311,3.889-2.386,7.726-4.255,11.417c-1.538,3.039-3.374-0.044-5.052,0.043c-1.697,0.088-6.197-2.187-3.298,3.035
c1.008,1.814-0.603,1.767-1.466,2.357c-3.137,2.146-6.206,4.12-4.275,8.977c0.929,2.339-2.713,5.296,0.35,7.795
c1.486,1.213,1.08,2.853,1.468,4.281c1.473,5.423-0.634,8.65-4.091,12.339c-3.202,3.417-0.505,8.896-2.967,12.843
c-2.478,3.972-4.549,7.736-8.539,11.184c-7.964,6.881-18.967,4.844-26.576,11.621c-3.059,2.724-12.111,0.939-13.022-2.76
c-1.326-5.387-1.95-9.334-8.728-7.408c-0.107,0.03-0.533-0.488-0.539-0.758c-0.148-6.147-5.59-8.284-8.714-12.242
c-2.616-3.315-2.942-8.495-4.056-12.907c-0.349-1.38,1.187-1.665,2.218-2.233c9.833-5.427,20.175-10.22,25.302-21.328
c0.867-1.88,1.934-3.697,1.381-5.619c-1.202-4.176-0.723-8.294-0.009-12.382c1.189-6.809,0.988-13.581,0.194-20.396
c-1.816-15.602-1.411-31.279-1.292-46.932C460.038,17.966,458.553,9.496,457,1C511.667,1,566.333,1,621,1z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M654,1c-1.459,4.093-2.451,7.463,3.889,8.63
c2.641,0.486,0.557,4.53-0.251,5.708c-2.024,2.95-1.739,4.355,1.1,6.399c2.42,1.742,1.534,5.813-1.242,6.345
c-2.741,0.525-2.993,1.515-1.683,3.643c1.161,1.886,1.613,3.65-0.93,4.954c-1.075,0.552-1.649,1.594-1.379,2.938
c0.391,1.936,9.94,10.392,11.923,10.52c6.692,0.435,9.054,3.03,7.106,9.193c-0.749,2.37-0.68,4.82-1.629,7.093
c-1.699,4.071-0.15,6.377,3.749,6.83c-3.163,4.634-5.624,9.72-6.222,15.303c-0.681,6.361-4.133,10.502-9.287,13.319
c-4.215,2.305-4.483,2.578-0.778,6.031c1.454,1.354,3.263,2.433,4.394,4.008c1.738,2.422,5.572,3.85,2.437,8.526
c-2.145,3.198,2.735,5.244,4.477,7.81c3.456,5.092,8.597,8.285,13.326,11.952c2.838,2.2,1.724,6.142,3.908,8.83
c2.632,3.237,6.126,6.185,6.084,10.974l0.021-0.016c-1.344,0.014-2.687,0.027-4.03,0.041c-0.095-0.073-0.19-0.146-0.285-0.219
c0.11,0.058,0.222,0.115,0.332,0.173c1.663,1.468,3.472,2.84,3.64,5.426c-2.015,0.84-3.79-0.621-5.667-0.399
c-1.424-1.277-3.134-1.837-5.004-1.995c-0.725-1.096-1.695-1.817-3.024-1.996c-2.773-3.101-7.28-5.208-10.078-3.263
c-3.538,2.46-7.716,3.731-10.993,6.593c2.444-0.464,5.746-0.583,6.852-2.201c4.523-6.622,9.499-1.483,14.263-1.173
c0.352,1.656,1.682,1.832,3.019,1.996c1.328,1.516,3.094,1.933,5.001,1.997c0.26,1.08,0.169,2.573,1.901,2.287
c2.654-0.439,4.746,1.129,7.095,1.769l-0.063-0.059c0.33,0.332,0.66,0.665,0.99,0.997l0.078,0.086c0,1.824,0,3.648,0,5.474
c1.039-1.736,1.496-3.439,0.612-5.169c0.265-0.256,0.53-0.512,0.795-0.768c0.971,4.885,5.968,6.076,8.737,9.348
c1.701,2.01,5.149,2.066,7.431,1.447c5.988-1.624,11.214,1.253,16.764,1.999c2.883,0.388,5.468,1.907,8.689,1.217
c2.896-0.62,3.501,2.743,3.408,4.254c-0.146,2.39-0.949,6.021-4.659,4.932c-3.617-1.062-6.592-1.194-9.538,1.383
c-1.153,1.01-2.597,0.322-3.749-0.356c-3.121-1.843-6.277-3.152-10.535-0.404c2.106-7.662-3.097-6.917-6.721-7.154
c-5.736-0.376-11.12-0.367-15.694-5.201c-1.467-1.551-5.282-0.905-5.277-4.864c0.001-0.843-1.523-0.992-2.592-0.87
c-3.587,0.41-7.128,0.412-10.521-1.16c-1.245-0.577-3.062-0.892-3.768,0.189c-2.468,3.775-4.699,1.733-7.863,0.856
c-6.231-1.727-12.831-2.236-19.316-2.854c-1.343-0.128-2.2-0.072-2.614-1.35c-0.708-2.185-2.231-2.735-4.406-3.288
c-3.385-0.861-3.124-4.222-3.127-6.961c-0.004-4.049-1.406-6.059-5.722-4.599c-0.312,0.105-0.788,0.417-0.902,0.315
c-5.343-4.809-10.547-0.277-15.832,0.099c-4.289,0.306-8.663,0.191-12.938-0.293c-3.081-0.35-3.781-7.101-0.749-9.654
c3.717-3.13,4.754-5.617,0.393-9.094c-1.753-1.397-1.614-4.155-1.551-6.44c0.078-2.83-0.568-4.931-4.012-4.703
c-5.134,0.34-7.73-3.567-10.224-6.853c-1.228-1.618-2.159-3.59-3.654-5.145c-0.934-0.971-1.568-1.847-0.232-3.351
c2.548-2.866,1.308-5.649-2.715-5.854c-2.35-0.119-3.493,0.116-2.215-2.814c1.361-3.121-2.762-1.951-3.471-3.714
c0.292-0.406,0.546-0.818,0.856-1.184c1.353-1.589,5.25-1.969,3.479-4.977c-1.381-2.346-4.454-1.646-6.904-1.001
c-1.11,0.293-2.152,0.845-3.352,1.33c-0.644-1.307-1.034-2.764-0.384-3.741c2.414-3.624,3.686-6.994,0.554-11.017
c-0.921-1.184-1.085-3.425,1.324-4.537c4.451-2.056,5.894-5.44,4.704-10.28c-1.581-6.427,1.897-10.801,8.45-9.804
c4.261,0.648,4.884-0.493,5.07-4.514c0.135-2.928,0.716-6.037,1.264-9.032c0.223-1.219,0.521-2.85,1.933-3.322
c6.363-2.13,9.415-7.516,12.709-12.674c2.687-4.207,5.984-2.49,9.011-0.744c2.817,1.627,4.507,2.378,3.991-2.127
c-0.485-4.242,3.521-2.279,4.419-2.089c2.909,0.618,4.872,1.149,4.632-2.914c-0.09-1.516,1.628-2.002,2.318-3.101
c0.68-1.083,2.357-2.304,1.431-3.446c-3.565-4.395-0.121-5.811,2.851-7.572C627.85,1.771,627.88,1.309,628,1
C636.667,1,645.333,1,654,1z M627.774,96.561c0.114,0.042,0.229,0.084,0.344,0.126c-0.078-0.141-0.156-0.28-0.234-0.421
C627.847,96.364,627.811,96.462,627.774,96.561z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M802,1c-0.426,3.974-5.394,6.576-9.513,4.525
c-2.843-1.416-5.139-2.34-7.427,0.611c-0.272,0.351-0.907,0.709-1.295,0.638c-7.041-1.294-11.535,5.22-17.9,5.816
c-5.02,0.472-9.374,2.919-14.091,4.253c-1.397,0.396-3.277,0.732-4.415,0.124c-6.881-3.686-12.454,0.396-18.314,2.767
c-1.063,0.431-2.364,1.708-3.163,0.877c-5.367-5.586-12.122-0.241-17.975-2.441c-2.52-0.947-5.66-0.19-7.36-3.167
c-0.561-0.981-1.691-1.009-2.686-0.942c-5.136,0.341-10.402,0.158-15.354,1.314c-3.036,0.708-5.997,2.834-8.817,4.229
c-4.017,1.989-7.229,0.527-10.744,0.866c-4.286-0.727-4.203-3.537-2.052-5.922c3.287-3.644,0.969-5.944-1.745-7.097
C655.403,5.862,655.939,3.73,657,1C705.333,1,753.667,1,802,1z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M377.034,231.039c-2.095,0.656-3.039,3.054-5.38,3.424
c-2.867,0.452-4.274-0.133-6.533-2.822c-5.705-6.793-0.559-12.35,0.548-18.314c0.729-3.926,2.179-7.622-0.117-11.549
c-0.699-1.194-0.134-2.814,0.318-4.324c1.044-3.481,2.462-6.877,2.575-10.63c0.122-4.067,1.5-7.21,5.979-8.651
c3.294-1.061,2.326-4.714,1.17-6.239c-2.172-2.869-0.053-2.504,1.445-2.82c6.979-1.472,14.012-2.721,20.936-4.414
c3.675-0.899,7.367-2.261,8.507-6.67c0.492-1.906,2.325-2.103,3.78-2.874c6.585-3.492,11.701-8.476,14.175-15.628
c0.865-2.503,2.878-1.622,4.336-2.19c1.428-0.558,1.915,0.805,2.176,2.029c0.552,2.598,1.178,5.18,1.694,7.784
c0.618,3.117,2.132,5.284,5.343,6.337c3.519,1.155,4.234,4.119,2.619,6.945c-1.763,3.084-0.617,3.779,2.129,4.005
c0.644,0.053,1.305-0.149,1.956-0.142c2.082,0.025,5.723,2.936,6.368,5.051c0.461,1.512,9.039,7.033,10.531,6.388
c2.639-1.14,5.846-0.763,8.066-2.167c8.357-5.285,18.569-5.563,27.011-10.479c2.251-1.312,2.41-3.805,3.597-5.709
c0.754-1.209,1.065-3.389,2.81-2.681c1.51,0.612,0.878,2.709,0.437,4.062c-2.568,7.857-6.248,15.012-13.566,19.557
c-2.477,1.537-3.346,3.274-2.438,6.223c1.071,3.481-1.568,6.72-5.221,7.573c-3.253,0.761-7.87-0.61-8.115,5.45
c-0.077,1.902-3.144,2.633-5.504,2.255c-3.302-0.53-5.572,0.272-5.774,4.181c-0.117,2.289-1.632,3.772-3.832,3.941
c-3.197,0.245-4.688,1.791-4.033,4.839c1.794,8.363-5.457,9.4-9.985,12.746c-4.739,3.501-10.943,3.074-15.83,6.216
c-1.899,1.221-3.715,2.204-4.005,4.671c-0.039,0.331-0.063,0.933-0.162,0.948c-5.838,0.88-6.214,8.414-11.737,9.628
c-3.102,0.682-5.476,2.481-7.102,5.074c-0.792,1.264-1.602,2.465-2.996,1.985c-3.834-1.317-7.611,1.294-11.419-0.066
c-0.672-0.24-1.992-0.089-2.325,0.375c-2.836,3.949-7.436,3.187-11.277,4.403c-0.766,0.242-1.604,0.511-2.373,0.428
c-1.097-0.119-3.534-9.888-2.905-10.821c0.732-1.088,2.352-1.452,1.698-3.641c-2.19-7.343-0.208-9.713,7.658-9.866
c0.329-0.007,0.658-0.058,1.825-0.165c-1.998-0.509-3.245-0.782-4.464-1.149c-1.291-0.389-2.6-0.821-2.635-2.54
c2.291-3.906,0.413-6.242-3.01-7.998c-0.688-2.771,3.086-4.252,1.998-7.552c-1.996,2.396-4.075,4.355-1.954,7.513
C374.69,225.783,378.237,227.526,377.034,231.039z M409.229,234.246c-0.189-0.194-0.381-0.386-0.576-0.574
c0.108-0.894,0.216-1.787,0.323-2.681l0.172-0.143l-0.137,0.177c-6.573,4.952-13.984,5.702-21.92,3.872
c9.794,3.404,19.137,1.464,29.509-1.315C413.275,232.726,411.271,233.622,409.229,234.246z M387.193,211.881
c-7.218-1.396-7.218-1.396-8.229,2.738C381.812,213.672,384.503,212.776,387.193,211.881z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M558.16,88.179c0.58,6.603,0.58,6.603,11.612,5.345
c-0.596,1.087-1.541,1.646-2.642,2.118c-3.789,1.623-4.415,3.504-0.313,5.597c0.927,0.473,1.911,1.089,1.866,2.149
c-0.244,5.699,3.357,5.012,7.987,3.74c-5.516,7.755,1.912,11.103,4.421,15.652c1.604,2.908,3.72,7.709,9.146,6.74
c1.13-0.202,1.565,1.131,1.777,2.093c0.788,3.561,1.402,7.103,5.055,9.188c1.153,0.658,0.195,1.628-0.682,2.294
c-4.853,3.684-5.207,8.313-2.829,13.549c0.32,0.705,0.546,2.151,0.246,2.338c-5.873,3.652-6.453,11.752-12.69,15.039
c-3.34,1.76-5.692,4.687-7.738,7.604c-2.935,4.185-5.099,4.87-9.127,1.652c-3.963-3.165-14.702-3.195-19.99-0.743
c-2.924,1.355-6.414,1.97-9.663,2.021c-4.246,0.066-7.815,1.783-11.196,3.74c-2.596,1.503-4.641,1.232-6.088-0.761
c-5.609-7.726-13.104-5.796-20.268-3.843c-2.964,0.808-4.958,0.415-7.528-1.492c2.348-1.879,4.751-3.54,6.845-5.526
c6.834-6.485,9.552-14.298,9.787-23.916c0.16-6.58-1.96-14.657,5.369-19.678c2.277-1.56,1.857-11.045,0.605-13.203
c-2.896-4.989-3.097-10.98,0.854-14.332c2.201-1.867,3.317-6.591,8.07-4.635c0.898,0.37,1.736-1.261,2.505-2.146
c5.018-5.775,5.704-12.458,4.448-19.652c-0.864-4.953,1.776-7.305,6.898-6.422c4.947,0.853,7.105,5.112,10.169,8.236
c1.735,1.77,3.185,3.815,4.791,5.713c2.301,2.718,4.82,4.041,7.926,1.115C557.91,87.896,558.035,88.036,558.16,88.179z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M350.393,309.262c4.419-1.638,4.624-4.51,3.326-8.054
c-0.846-2.309-0.276-4.546,1.089-7.227c3.142,4.104,4.908,2.597,5.589-1.303c0.882-5.046,2.727-8.743,7.496-11.918
c4.146-2.761,6.746-8.107,5.562-14.072c-0.509-2.563-0.416-4.323,3.442-4.89c3.93-0.576,8.261-0.77,11.842-3.1
c0.921-0.599,1.629-1.023,2.481,0.146c0.331,0.454,1.567,0.897,1.64,0.799c3.882-5.332,10.535-1.058,15.475-4.889
c5.665-4.393,6.402-3.441,13.354-12.226c0.786-0.994,1.914-1.268,3.091-1.404c1.672-0.193,2.61-1.086,3.171-2.71
c1.667-4.835,5.245-6.225,10.439-6.523c4.248-0.244,7.716-3.642,11.396-5.885c0.546-0.333,0.856-1.03,1.369-1.443
c4.185-3.368,6.484-6.305,6.863-11.347c0.355-4.721,5.65-2.063,6.678-5.301c0.909-2.864,0.884-6.229,5.748-5.824
c3.486,0.29,6.877-1.422,7.921-5.38c0.597-2.265,2.29-2.107,3.864-2.336c3.451-0.501,7.196-0.484,7.258-5.517
c0.009-0.767,0.895-1.751,1.735-1.427c5.754,2.215,10.214-2.694,15.611-2.779c1.977-0.03,3.449,0.037,4.005,1.733
c0.846,2.582-1.8,1.626-2.84,2.216c-2.492,1.414-4.876,3.53-8.354,2.04c4.377,2.044,4.959,8.251,11.049,8.428
c-1.296,2.432-2.811,4.452-1.098,7c1.335,1.984,2.342,3.337,5.125,2.377c2.433-0.84,5.12-0.938,8.275,0.446
c-4.607,3.379-9.447,5.452-12.699,9.595c-0.734,0.935-1.441,1.717-1.671,2.921c-1.178,6.172-4.55,8.858-10.574,10.728
c-4.596,1.426-9.162,3.742-13,6.644c-8.216,6.212-15.94,13.071-23.895,19.631c-1.024,0.844-2.416,1.426-2.46,2.938
c-0.069,2.388-1.465,2.591-3.359,2.468c-2.561-0.168-4.239,1.68-6.157,2.95c-0.749,0.496-1.497,1.377-0.54,1.926
c3.563,2.045,0.965,5.43,1.806,8.101c0.77,2.445-1.615,4.237-4.186,4.567c-2.425,0.312-4.978,0.627-7.34,0.198
c-3.26-0.591-5.939-1.114-6.6,3.301c-0.185,1.238-1.322,1.726-2.702,1.635c-9.302-0.614-17.793,2.171-25.235,7.385
c-7.75,5.429-16.35,9.031-24.742,13.12c-4.212,2.052-8.158,4.461-11.301,7.978c-1.176,1.314-2.453,2.025-3.782,0.663
c-1.841-1.886-3.265-4.035-6.116-4.823C355.919,310.118,353.311,309.975,350.393,309.262z M468.999,218.988
c1.001,0.698,1.862,1.837,3.442,1.094c-0.89-1.531-2.38-0.634-3.478-1.051c-0.396-1.292-1.165-1.987-2.517-1.309
c-1.877,0.942-1.081,2.832-1.408,4.322c-3.108,0.046-4.899,3.008-7.782,3.53c-3.745,0.68-5.836,3.165-7.214,6.466
c-1.074,0.314-2.266-1.008-3.461,0.171c1.362,1.046,2.424,0.786,3.418-0.226c1.956-0.921,4.771-1.086,5.934-2.24
c3.658-3.636,3.368-3.929,8.174-1.98c-0.5-2.164-1.235-4.308,0.874-5.769C466.076,220.669,466.365,218.264,468.999,218.988z
M442.853,234.325c-0.278,0-0.557-0.003-0.834,0.014c-0.008,0-0.004,0.202-0.006,0.311c0.278,0.001,0.557,0.002,0.835,0.003
C442.848,234.544,442.848,234.435,442.853,234.325z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M573.974,217.017c1.159-2.683,2.744-5.366-0.009-8.045
c0.269-0.069,0.536-0.14,0.805-0.209c-0.074-0.117-0.147-0.234-0.221-0.352c-0.182,0.202-0.362,0.404-0.543,0.607
c-0.798,0.211-1.949,0.158-2.337,0.677c-2.41,3.228-4.624,2.451-6.951-0.354c1.768-1.251,4.003-1.907,4.234-5.118
c0.172-2.383,2.715-5.166,5.033-5.743c3.841-0.956,6.362-3.646,6.6-6.496c0.246-2.954-3.771-3.951-6.67-4.84
c2.941-6.566,7.265-11.184,14.091-13.003c1.752-0.468,2.443-1.596,1.435-2.852c-2.139-2.663-0.05-3.9,1.464-5.31
c2.042-1.9,4.526-3.252,5.878-5.959c0.886-1.774,2.989-1.038,4.591-0.962c7.021,0.333,13.999,0.298,20.709-2.2
c1.218-0.454,1.404,0.436,1.737,1.133c0.622,1.304,1.653,2.67,3.015,1.871c4.936-2.895,3.765,1.031,3.946,3.377
c0.304,3.905,0.256,7.996,5.841,8.061c1.186,0.014,1.593,0.96,2.162,1.804c1.534,2.273,2.595,6.38,6.244,1.836
c0.227-0.282,1.499,0.203,2.255,0.43c3.957,1.189,7.976,1.885,12.128,1.791c0.931-0.021,2.263-0.511,2.741,0.585
c2.43,5.561,5.165,3.19,7.707,0.266c1.457-1.676,2.832-1.9,4.793-1.099c1.984,0.811,4.041,1.465,6.285,1.301
c1.843-0.134,2.796,1.134,4.205,2.23c4.011,3.12,8.975,4.98,13.386,7.632c3.545,2.132,7.832,0.371,11.256,2.544
c0.813,0.517,2.496-1.585,2.414,0.659c-0.039,1.073-0.617,2.479-2.313,2.861c-3.234,0.73-6.379,1.856-9.61,2.604
c-5.912,1.367-11.822,2.834-17.811,3.752c-3.203,0.491-8.96,0.853-9.421-0.334c-1.483-3.827-5.156-3.897-7.356-6.106
c-0.124-0.124-0.563,0.064-1.051,0.138c-0.447,2.492,2.271,1.789,3.16,2.953c0.985,1.289,3.781,1.411,3.003,3.851
c-0.718,2.249-3.001,1.57-4.756,1.697c-4.282,0.309-8.638-0.457-12.825,1.288c-2.045,0.852-3.523,1.884-4.976,3.721
c-3.333,4.217-6.671,9.107-11.186,11.519c-4.335,2.316-8.171,5.2-12.202,7.833c-2.721,1.778-4.488,4.386-2.629,8.022
c1.278,2.5-0.518,2.971-2.365,2.827c-11.115-0.863-22.184-1.949-31.722-8.644c-2.586-1.815-5.273-3.12-8.625-3.242
c-7.425-0.271-8.035-1.439-5.496-9.043c0.579,2.534,3.426,2.889,4.67,4.851c0.555,0.875-2.536,1.679,0.07,2.108
c0.718,0.119,1.671-0.299,1.881-1.273c0.228-1.056-0.08-1.987-1.053-2.544C577.73,219.056,575.846,218.047,573.974,217.017z
M581.986,200.97c0.332-0.332,0.665-0.665,0.998-0.998c4.132-3.227,6.46-8.467,12.001-10.121
c-7.747,2.024-7.747,2.024-11.958,10.164c-0.332,0.333-0.666,0.665-0.999,0.998c-0.339,0.338-0.678,0.677-1.018,1.015
c-0.323,0.67-0.647,1.339-0.972,2.009c-0.681,0.324-1.361,0.649-2.041,0.975c-0.031,0.312-0.916,0.401-0.233,0.897
c0.065-0.314,0.131-0.629,0.197-0.942c0.679-0.327,1.356-0.655,2.035-0.982c0.325-0.665,0.65-1.33,0.976-1.995
C581.311,201.648,581.648,201.31,581.986,200.97z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M359.599,337.555c-2.142-3.257-3.584-5.479-5.056-7.683
c-3.299-4.94-10.645-7.911-16.383-6.871c-4.896,0.887-9.532,2.402-13.899,4.784c-4.921,2.684-10.783,1.667-15.843,3.952
c-0.69,0.312-1.986-0.265-2.803-0.758c-6.143-3.711-12.589-6.699-19.409-8.976c-2.101-0.701-3.59-2.31-2.139-5.079
c1.509-2.88-0.795-5.964-0.097-8.819c1.407-5.754,1.661-11.479,1.605-17.392c-0.034-3.599,0.883-8.313,6.78-7.685
c0.722,0.077,1.726-0.262,2.235-0.772c4.94-4.941,13.406-5.865,19.976-3.15c5.89,2.435,12.251,5.232,18.362,5.139
c4.632-0.072,10.009-0.016,14.51-1.907c3.706-1.556,7.154-0.385,10.695-0.696c1.726-0.151,1.946,0.883,1.729,2.204
c-0.35,2.135-0.716,4.269-1.144,6.39c-0.229,1.14-0.317,2.454-2.16,1.289c-3.146-1.989-4.191,0.369-4.837,2.748
c-0.472,1.74-0.745,3.618-0.646,5.409c0.152,2.749,0.814,5.381-2.798,6.656c-1.145,0.404-1.731,2.048-0.965,3.479
c0.856,1.602,2.248,2.397,4.08,2.381c4.199-0.04,7.746,1.26,10.674,4.473c1.636,1.796,2.764,3.573,1.346,5.71
C360.557,326.688,360.754,331.77,359.599,337.555z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M541.897,223.594c-3.604,0.122-7.297,0.694-10.816-0.561
c-5.817-2.074-11.211,0.934-16.826,1.188c-1.28,0.058-2.6,1.087-3.253-0.841c-0.505-1.493,0.432-2.113,1.417-3.187
c3.281-3.573,7.521-5.716,11.332-8.491c1.007-0.732,2.707-1.17,2.341-2.856c-0.393-1.804-1.928-2.77-3.62-2.958
c-2.467-0.275-4.972-0.215-7.461-0.262c-2.909-0.054-4.855-0.672-2.687-4.082c1.311-2.062,1.185-3.836-1.397-4.709
c-1.893-0.64-4.271-0.857-3.526-3.724c0.787-3.029,4.292-3.276,5.672-2.524c6.29,3.427,11,0.154,16.242-2.471
c4.63-2.318,10.469-0.52,14.932-2.778c3.862-1.955,7.172-3.44,11.502-2.286c2.143,0.571,4.03,1.374,6.358,2.927
c-3.896,1.44-7.563,1.757-10.987,3.326c-7.2,3.302-12.261,8.819-17.555,14.205c-2.596,2.64-2.939,6.886,0.041,8.116
c4.356,1.797,3.778,6.981,7.686,8.622C542.083,220.581,542.348,222.236,541.897,223.594z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#C8C3D9" d="M553.266,210.74c1.375,4.441,4.651,7.87,6.453,12.037
c-9.276,3.021-16.313-0.348-19.465-9.296c-0.489-1.389-1.227-2.224-2.675-2.618c-3.632-0.988-3.353-4.164-1.764-5.849
c7.02-7.442,14.258-15.02,25.419-15.558c4.25-0.205,8.46,2.007,12.905,0.556c1.266-0.413,2.682,0.501,2.996,2.034
c0.327,1.595-1.028,2.82-2.067,3.037c-5.313,1.104-6.646,6.026-9.528,9.445c-0.416,0.493-0.531,1.238-0.945,1.733
c-1.026,1.229-4.618,0.979-3.122,3.356c1.208,1.918,2.093,4.865,5.429,5.125c3.201,0.249,3.031,3.473,3.738,5.578
c0.418,1.244-0.271,3.252-2.216,3.245c-2.49-0.009-5.436,1.354-7.225-1.712c-2.014-3.449-4.002-6.913-6.003-10.369
C554.856,210.899,554.445,210.425,553.266,210.74z M546.033,213.039c-1.264,1.095-1.085,2.113,0.369,3.304
c-0.156-1.266-0.285-2.304-0.414-3.342c0.182-0.222,0.381-0.433,0.534-0.673c0.04-0.062-0.063-0.214-0.1-0.325
C546.293,212.349,546.163,212.693,546.033,213.039z M549.6,205.654c-2.092-0.381-4.03,0.289-5.804,1.431
c-0.07,0.045,0.332,1.353,0.765,1.566C547.44,210.073,547.553,206.323,549.6,205.654z"/>
</svg>
</div>

Can you try an imagemap? They are pretty lightweight and there are lots of easy to use generators out there now: https://www.image-maps.com/

Making SVG image responsive with media queries

I have an SVG Image that I am using on my website. However, I want it so that when the browser width is less than 292px, the SVG image will resize to become smaller.
This is the current code I have on my SVG.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 141 141">
<defs>
<style type="text/css">
.cls-2 {
fill: #fff;
}
#smaller {
height="15";
width="15";
}
#media screen and (max-width: 292px) {
#smaller {
display: block;
}
}
</style>
</defs>
<path d="M70.500,-0.003 C31.562,-0.003 -0.003,31.562 -0.003,70.500 C- 0.003,109.437 31.562,141.002 70.500,141.002 C109.437,141.002 141.002,109.437 141.002,70.500 C141.002,31.562 109.437,-0.003 70.500,-0.003 ZM99.628,83.851 C99.628,83.851 81.325,64.143 81.325,64.143 C81.325,64.143 81.325,118.311 81.325,118.311 C81.325,118.311 59.675,118.311 59.675,118.311 C59.675,118.311 59.675,64.137 59.675,64.137 C59.675,64.137 41.367,83.851 41.367,83.851 C41.367,83.851 24.432,72.287 24.432,72.287 C24.432,72.287 56.661,37.585 56.661,37.585 C56.661,37.585 70.498,22.688 70.498,22.688 C70.498,22.688 84.335,37.585 84.335,37.585 C84.335,37.585 116.567,72.287 116.567,72.287 C116.567,72.287 99.628,83.851 99.628,83.851 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>
However, this code does not seem to be working. What can I do to make it smaller with media queries?

Your CSS syntax is not correct, but if you want your image to scale down it would look something like this:
#smaller {
height: 15px;
width: 15px;
}
#media screen and (max-width: 292px) {
#smaller {
height: 10px;
width: 10px;
}
}

How to apply clipPath to a div with the clipPath position being relative to the div position

Not sure if I've formulated the title properly, but here goes the question.
I have an SVG path of a cloud-like shape which I would like to use in CSS with the clip-path property.
<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z" fill="lightblue" />
When I add an SVG element in HTML and define <clipPath> with that path, the browser positions the clipping path in the top-left corner. If I apply a margin to the clipped element, the mask is not linked and stays in its initial position.
Other similar threads state that the clipPathUnits="objectBoundingBox" attribute should be added to the <clipPath> object, but that doesn't seem to solve my problem. I even transformed the path from absolute to relative and tried it like that, but got the same result.
Is it possible to somehow link the clipping path with the clipped element so that when positioning is applied to the clipped element, the clipping path moves as well?
Here is the relative path, if it helps:
<path d="M46.9819755,61.8637972c-4.974,5.021,-11.906,8.136,-19.573,8.136c-15.137,0,-27.409,-12.144,-27.409,-27.125c0,-9.93,5.392,-18.613,13.436,-23.34c1.381,-11.012,10.871,-19.535,22.373,-19.535c8.122,0,15.24,4.25,19.209,10.625c3.22,-1.753,6.918,-2.75,10.852,-2.75c12.452,0,22.547,9.99,22.547,22.313c0,1.972,-0.259,3.885,-0.745,5.707l0,0c5.682,2.791,9.586,8.59,9.586,15.293c0,9.423,-7.719,17.062,-17.241,17.062c-4.533,0,-8.657,-1.731,-11.735,-4.562c-2.721,1.778,-5.981,2.812,-9.485,2.812c-4.572,0,-8.729,-1.761,-11.815,-4.636z fill="lightblue" />
As well as some test HTML/CSS. (I've set the left property to 10px so that you see the clipping issue occur)
.clippedElement {
width: 200px;
height: 200px;
position: absolute;
left: 10px;
top: 0;
background-color: lightblue;
-webkit-clip-path: url(#cloudClip);
-moz-clip-path: url(#cloudClip);
clip-path: url(#cloudClip);
}
<svg>
<defs>
<clipPath id="cloudClip">
<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z"
/>
</clipPath>
</defs>
</svg>
<div class="clippedElement"></div>

Thanks to Robert's comment, I was able to solve the issue I had.
Here is a PHP snippet I used to convert the absolute path to relative, so that the values are between 0 and 1.
$absolute_path = "M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z";
function regex_callback($matches) {
static $count = -1;
$count++;
$width = 98;
$height = 70;
if($count % 2) {
return $matches[0] / $height;
} else {
return $matches[0] / $width;
}
}
$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path);
Since the clipping path is not rectangular, I couldn't divide the values with one number, but had to use the width and the height of the clipping path itself.
.clippedElement {
width: 98px;
height: 70px;
position: absolute;
left: 10px;
top: 0;
background-color: lightblue;
-webkit-clip-path: url(#cloudClip);
-moz-clip-path: url(#cloudClip);
clip-path: url(#cloudClip);
}
<svg width="98" height="70">
<defs>
<clipPath id="cloudClip" clipPathUnits="objectBoundingBox">
<path d="M0.47940791326531,0.88376853142857 C0.42864807040816,0.95549795142857 0.3579178244898,1 0.27968550408163,1 C0.12521946530612,1 0,0.82651034 0,0.6125 C0,0.47064633714286 0.055015293877551,0.34659547428571 0.13709690102041,0.2790703 C0.15119605510204,0.12175503485714 0.24803319489796,0 0.36539557755102,0 C0.44827044387755,0 0.52091058571429,0.060712032857143 0.56141010204082,0.15178580714286 C0.59426133367347,0.12674508114286 0.63200367244898,0.1125 0.67214742040816,0.1125 C0.79920819387755,0.1125 0.90221130204082,0.25520923571429 0.90221130204082,0.43125 C0.90221130204082,0.45943181571429 0.89957155816327,0.48675941714286 0.89461595816327,0.51278406428571 L0.89461595816327,0.51278406428571 C0.95258663571429,0.55264938571429 0.99243243265306,0.63550269714286 0.99243243265306,0.73125 C0.99243243265306,0.86586940714286 0.91366534897959,0.975 0.81650122857143,0.975 C0.77024686836735,0.975 0.72816159897959,0.95026909428571 0.69675813163265,0.90983054428571 C0.66899289183673,0.93522066142857 0.63572744081633,0.95 0.59997051632653,0.95 C0.55331260408163,0.95 0.51089684897959,0.92483567714286 0.47940791326531,0.88376853142857 Z"></path>
</clipPath>
</defs>
</svg>
<div class="clippedElement"></div>

Resources