How to change the size of an svg icon - html

Please see the snippet below. I have an svg icon whose width and height I've set to 80px each, however, the svg icon itself is not filling up that full size. How can I correctly adjust the size of an individual svg icon? Thanks!
svg {
background: pink
}
<svg width="80" height="80">
<rect width="24" height="24" fill="none" rx="0" ry="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/>
</svg>


I'm not certain what your SVG's original proportions were, but if you insert them to the last two parameters of the viewBox attribute on the <svg> tag, that'll give it something familiar to scale up to 80/80px from!
(I've guessed at 24/24)
From MDN:
The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).
(Emphasis mine)
svg {
background: pink
}
<svg width="80" height="80" viewBox="0 0 24 24">
<rect width="24" height="24" fill="none" rx="0" ry="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/>
</svg>

Related

How to resize a svg

I want to reduce the size of a svg. I tried reducing the height and width attributes and that helped, but the size of the image is still too big and when I try to reduce more, it ends up being cut instead of reduced.
So, more specifically, if I have a svg like this one:
<svg height="15" width="28" fill="#D0D4D9" fill-rule="evenodd">
<path d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"></path>
<path d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"></path>
</svg>
how can I resize it? Is there maybe an online page when we can do that or a general rule for this?

SVG elements have no actual size, they are made up of vectors to precisely be displayed in any size.
The first problem with your SVG code is to have omitted the viewbox attribute.
You can calculate its values using the JS method: SVGGraphicsElement.getBBox().
In your case your viewBox is: viewBox="2 4 20 16"
Then simply change css values of width and height, according to the viewbox props (20 / 16).
this will be :
const mySVG = document.querySelector('#my-svg');
function toggleSize()
{
mySVG.classList.toggle('sz200');
}
svg {
width : 100px;
height : 80px;
margin : 20px;
background : blue;
fill : #D0D4D9;
fill-rule : evenodd;
}
.sz200 {
width : 200px;
height : 160px;
}
<button onclick="toggleSize()">toggle size: (100-80) | (200-160)</button>
<br>
<svg id="my-svg" viewBox="2 4 20 16" >
<path d="
M 12 18 c -4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998
3.973 7.998 6 0 1.74-3.462 6-7.998 6 m 0-14 C 6.48 4 2 8.841 2 12
c 0 3.086 4.576 8 10 8 5.423 0 10 -4.914 10-8 0 -3.159 -4.48 -8 -10 -8" />
<path d="
M 11.977 13.984 c -1.103 0-2-.897-2-2 s .897-2 2-2 c 1.104 0 2 .897 2 2
s -.896 2-2 2 m 0-6 c -2.206 0-4 1.794-4 4 s 1.794 4 4 4 c 2.207 0 4-1.794
4-4 s -1.793-4-4-4" />
</svg>

Change the height from 15 to auto
<svg
height="auto"
width="28"
fill="#D0D4D9"
fill-rule="evenodd"
>
<path
d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"
></path>
<path
d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"
></path>
</svg>

How to keep original position when using CSS transform scale?

I want to create a map in svg. What I am trying to accomplish is to have elements which will increase in size when hovered.
The problem is that my svg elements do not remain in the center after scaling. How to modify my CSS code to make elements increase in size and but to keep original center position?
Is there any error in my code?
Here's my website.
Thank you!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
display: flex;
justify-content: center;
}
svg {
width: 60%;
}
polygon,
circle,
rect,
path {
position: absolute;
transition: 0.3s;
cursor: pointer;
}
polygon:hover,
polygon:hover,
circle:hover,
rect:hover,
path:hover {
transform: scale(1.05, 1.05);
transform-origin: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="mapp.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" viewBox="0 0 2945 2058" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>平面圖</title>
<g class="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="平面圖">
<path
d="M348,359 L628,244 L626,230 L749,198 L853,172 L984,145 L1146,141 L1240,190 L1318,189 L1325,151 L1414,151 L1578,114 L1759,37 L1910,0 L2069,1 L2080,13 L2134,26 L2183,14 L2247,12 L2252,1 L2325,34 L2338,77 L2372,116 L2416,206 L2462,213 L2478,202 L2515,210 L2529,224 L2529,255 L2580,290 L2665,283 L2680,292 L2657,402 L2687,436 L2714,442 L2771,403 L2794,400 L2848,454 L2849,482 L2840,494 C2840,494 2902.13,497.982 2908,693 C2913.87,888.018 2916,1079 2916,1079 L2945,1473 C2945,1473 2928.91,1707.92 2784,1753 C2639.09,1798.08 2563,1774 2563,1774 L2443,1704 L2355,1675 L1981,1682 L1778,1695 L1575,1722 L1533,1727 L1528,1742 L1460,1778 L1435,1745 L1386,1767 L1370,1735 L1312,1759 L1262,1808 L1272,1822 L1231,1861 L1109,1887 L1074,1854 L975,1846 L937,1831 L775,1823 L734,1892 L720,1905 L639,1896 L646,1885 L612,1879 L590,1874 L590,1863 L602,1867 L653,1756 L492,1663 L421,1725 L411,1714 L444,1682 L445,1661 L456,1638 L370,1595 L285,1524 L190,1493 L135,1489 L0,1225 L81,1134 L138,963 L163,954 L151,936 L227,778 L257,768 L278,785 L411,661 L399,616 L370,599 L337,597 L296,576 L329,496 L313,460 L348,359 Z"
class="ground-basic" fill="#3930C3"></path>
<path
d="M786,352 L733,352 L733,270 L1965,261 L2089,273 L2468,381 L2573,381 L2573,393 L2594,401 L2594,418 L2802,472 C2802,472 2812.86,472.054 2834,487 C2855.14,501.946 2862.49,506.623 2871,520 C2879.51,533.377 2888.77,538.281 2894,558 C2899.23,577.719 2902.95,569.475 2906,604 C2909.05,638.525 2920,1069 2920,1069 L2939,1476 C2939,1476 2949.29,1577.41 2914,1674 C2878.71,1770.59 2861.38,1741.28 2866,1821 C2870.62,1900.72 2899,1973 2899,1973 L2794,2000 L2758,1832 L2567,1866 L2610,2057 L2584,2058 C2584,2058 2539.64,1884.37 2522,1883 C2504.36,1881.63 2439,1900 2439,1900 L2268,1936 C2268,1936 2007.7,1964.14 1958,1930 C1908.3,1895.86 1808.73,1822.51 1782,1762 C1755.27,1701.49 1747.64,1660.95 1728,1655 C1708.36,1649.05 868,1655 868,1655 C868,1655 830.145,1653.57 810,1701 C789.855,1748.43 724,1895 724,1895 L639,1896 L801,1586 L801,1449 L757,1396 L216,1396 L218,1367 L129,1326 L129,1165 L149,1081 L550,697 L680,695 L672,749 L580,751 L407,901 L678,901 L678,965 L641,967 L640,942 L380,942 L201,1118 L179,1169 L179,1294 L213,1317 L341,1317 L371,1280 L507,1280 L557,1307 L841,1306 C841,1306 928.587,1279.64 935,1236 C941.413,1192.36 998,1209 998,1209 C998,1209 1004.84,1262.39 1030,1270 C1055.16,1277.61 1230,1282 1230,1282 L1248,1264 L1342,1261 L1366,1284 L1693,1275 C1693,1275 1719.63,1314.82 1732,1261 C1744.37,1207.18 1746,1166 1746,1166 L1582,1160 L1541,1127 L1563,1118 L1598,1118 L1754,1125 L1802,1082 L1804,962 L1814,877 L1863,871 L1879,908 L1879,965 L2306,965 L2343,928 L2421,928 L2435,914 L2461,914 L2461,968 L2381,968 L2381,985 L2598,985 L2619,964 L2671,964 L2691,984 L2672,1017 L2609,1024 L2588,1013 L2286,1013 C2286,1013 2266.94,1016.47 2268,1035 C2269.06,1053.53 2269,1086 2269,1086 L2130,1088 L2119,1021 L1899,1024 L1804,1161 L1804,1239 L1821,1264 L1821,1341 L1777,1380 L1777,1571 C1777,1571 1760.53,1595.69 1868,1596 C1975.47,1596.31 2349,1572 2349,1572 L2354,1674 L2560,1759 C2560,1759 2736.83,1805.67 2792,1713 C2847.17,1620.33 2865.83,1566.82 2869,1534 C2872.17,1501.18 2867,1416 2867,1416 L2855,1412 L2866,1256 L2837,1102 L2866,1076 L2841,860 L2837,636 C2837,636 2826.02,572.553 2791,553 C2755.98,533.447 2504,466 2504,466 L2016,326 L785,333 L786,352 Z"
class="road" fill="#FFFFFF"></path>
<rect class="ground-lake" fill="#3930C3" fill-rule="nonzero" x="850" y="1381" width="881"
height="184" rx="50">
</rect>
<polygon class="center" fill="#FF575F"
points="1945 1088 1945 1365 2078 1365 2078 1336 2237 1336 2237 1561 2353 1561 2353 1043 2287 1043 2287 1093">
</polygon>
<polygon class="dorm-b" fill="#FF575F"
points="1639 390 1622 390 1621 444 1633 445 1632 539 1984 539 1984 446 1996 446 1996 390 1984 390 1984 381 1947 381 1947 394 1920 394 1920 365 1863 365 1863 348 1824 348 1824 368 1765 368 1743 377 1743 389 1702 389">
</polygon>
<polygon class="dorm-a" fill="#FF575F" points="459 522 1031 522 1031 407 1134 407 1133 354 458 349">
</polygon>
<polygon class="manageBuilding" fill="#FF575F"
points="670 695 670 836 664 836 664 884 673 884 673 902 845 902 851 911 1208 911 1208 847 1221 847 1221 780 1209 780 1209 750 1070 750 1070 733 839 733 839 743 803 743 803 711 937 711 937 697">
</polygon>
<path
d="M1332,784 L1468,784 C1468,784 1470.32,752.959 1502,752.999959 C1533.68,753.041 1535,783 1535,783 L1551,783 L1551,845 L1566,845 L1566,872 L1551,872 L1551,910 L1364,910 L1364,878 L1332,878 L1332,784 Z"
class="library" fill="#FF575F"></path>
<polygon class="engineerBuildibg" fill="#FF575F"
points="1584 768 1587 754 1846 754 1892 859 1879 875 1811 875 1811 952 1802 968 1802 1073 1766 1121 1610 1121 1586 1111 1586 1025 1573 1023 1573 945 1563 945 1563 886 1589 886">
</polygon>
<polygon class="1st" fill="#FF575F"
points="1369 1154 1046 1154 1046 1088 1028 1088 1028 1052 1046 1052 1046 1028 1219 1028 1219 938 1494 938 1494 915 1552 915 1552 993 1568 993 1568 1037 1555 1037 1555 1066 1417 1066 1417 1152">
</polygon>
<circle class="museum" fill="#FF575F" fill-rule="nonzero" cx="624" cy="1211" r="90"></circle>
<polygon class="dorm-c" fill="#FF575F"
points="2476 740 2476 917 2742 917 2742 739 2685 739 2685 747 2638 747 2638 741"></polygon>
<polygon class="dorm-c" fill="#FF575F"
points="2466 916 2393 916 2393 733 2447 733 2447 760 2469 760 2469 784 2449 784 2449 859 2461 859 2461 888 2468 888">
</polygon>
<polygon class="dorm-c" fill="#FF575F"
points="2427 660 2427 712 2477 712 2477 733 2506 733 2506 697 2605 697 2605 730 2636 730 2636 713 2684 713 2684 732 2740 732 2740 694 2688 694 2688 663 2638 663 2638 644 2479 644 2479 659">
</polygon>
<path
d="M1353,1390 L1353,1528 L1379,1552 L1671,1552 C1671,1552 1691.78,1559.48 1709,1538 C1726.22,1516.52 1719,1471 1719,1471 L1720,1429 C1720,1429 1724.97,1415.73 1708,1402 C1691.03,1388.27 1665.52,1389.25 1653,1389 C1640.48,1388.75 1353,1390 1353,1390 Z"
class="grandpa" fill="#FF575F"></path>
<path
d="M1020,1447 C1053.09,1447 1100.48,1422.13 1127,1426 C1168.86,1432.11 1176,1442.79 1176,1458 C1176,1473.78 1170.21,1487.97 1128,1496 C1103.74,1500.62 1068.14,1493 1037,1493 C1008.51,1493 944.913,1533.92 922,1530 C876.282,1522.19 875,1500.56 875,1484 C875,1470.08 888.992,1451.32 921,1445 C946.145,1440.03 982.46,1447 1020,1447 Z"
class="lake" fill="#FF575F"></path>
<path
d="M408,971 L423,961 L628,961 L638,956 L688,956 L688,983 L681,983 L681,1119 L643,1119 L643,1105 L623,1105 L623,1115 C623,1115 562.522,1117.86 544,1150 C525.478,1182.14 523.671,1191.1 524,1226 C524.329,1260.9 524,1272 524,1272 L459,1272 L459,1293 L434,1293 L434,1272 L196,1272 L196,1212 L229,1212 L229,1113 L347,1113 L347,1036 L355,1024 L331,1008 L334,999 L348,1001 L347,988 L385,948 L408,971 Z"
class="2en" fill="#FF575F"></path>
<path
d="M2154,948 L2156,649 L2141,645 L2142,626 C2142,626 2158.27,624.736 2164,631 C2169.73,637.264 2171.81,635.591 2172,646 C2172.19,656.409 2172,949 2172,949 L2154,948 Z"
class="herpStairway" fill="#FF575F"></path>
</g>
</g>
</svg>
</div>
<script src="mapp.js"></script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg3plcpnl0133'},{'id':'7428471'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

How do I invert the colours of the background image using CSS?

I want to invert the colours of the background image given below.
html {
background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
}

Apply the coloration to the background and use white color for SVG. You don't really need transparency since you are dealing with the html element so there is nothing behind.
html {
background: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="white" fill-rule="evenodd"/%3E%3C/svg%3E'),
rgba(156, 146, 172, 0.4);
}

easing in svg animate doesn't work

I tried to add keySplines, values, keyTimes attributes to animate element to simulate easing animation. Easing effect doesn't work.
jsfiddle
HTML
<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
<path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
<animate class="triangle-animation" attributeType="XML" attributeName="d" from="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z" to="M765,22L765,15L505.00002429484215,15L490.00002429484215,0L475.00002429484215,15L0.5,15L0.5,21.5" dur="4s" repeatCount="1" fill="freeze" keySplines=" 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" begin="indefinite"></animate>
</path>
</svg>
<button id="btn">Click me</button>
JS
document.getElementById("btn").onclick = function(e) {
console.log('anim');
document.querySelector('.triangle-animation').beginElement();
}

If you use keyTimes, you either must provide a values list with a matching number of semicolon-separated entries, or if you use from and to, keyTimes must be "0;1" and keySplines must contain only one entry.
The path definitions in the values list must structurally match, with only numbers differing. If one has a closing Z command, every value needs one. Exception: Optional command letters (for repetitions of the same command) can be used or left out.
Bonus: your example doesn't need javascript to start with a button click. Just set begin="btn.click".
<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
<path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
<animate class="triangle-animation" attributeType="XML" attributeName="d" values="
M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z;
M765 22 765 15 239 15 225 0 211 15 L0.5 15 L0.5 21.5 Z;
M765 22 765 15 505 15 L490 0 L475 15 L0.5 15 L0.5 21.5 Z"
keySplines="0.1 0.8 0.2 1;0.1 0.8 0.2 1"
keyTimes="0;0.5;1"
dur="4s" repeatCount="1" fill="freeze" calcMode="spline" begin="btn.click"></animate>
</path>
</svg>
<button id="btn">Click me</button>

I was missing Z in to attribute. Working jsfiddle.

SVG use defs not work on chrome 46

The use tag in my SVG works on Chrome latest versions (58, 59, maybe 50+),
but not work on Chrome 46 (maybe 40+). why?
<svg>
<defs>
<g id="diamond" viewBox="0 0 120 60" enable-background="new 0 0 120 60">
<path d="M 11 -24 L 44 -6 Q 55 0 44 6
L 11 24 Q 0 30 -11 24
L -44 6 Q -55 0 -44 -6
L -11 -24 Q 0 -30 11 -24" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2px" stroke-miterlimit="10"></path>
</g>
</defs>
<g>
<use href="#diamond" transform="translate(60,30)" class="diamond" style="opacity: 1;"></use>
</g>
</svg>

The ability to write href rather than xlink:href is fairly new. It's a part of the SVG 2 specification. The SVG 1.1 specification only defines xlink:href.
If you need to target old browsers, or Safari, you'll need to use xlink:href as well or instead of href.