How to make multiple <g> objects clickable within one SVG - object
So I have read at least 10 other similar questions but none of the solutions seem to work for me.
What I am trying to do:
I have a bunch of SVG code that makes a tiny city. I want to make each building link to a different webpage.
Sorry for the messy code.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px"
height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
</filter>
</defs>
<g>
<path fill="#ABABAA" d="M502.987,318.81l-9.145,1.983c-0.385-0.433-0.822-0.721-1.267-0.792c0.379-0.752,0.498-1.841,0.247-2.995
c-0.289-1.332-0.986-2.379-1.771-2.831c-0.005-0.458-0.047-0.935-0.153-1.424c-0.516-2.377-2.087-4.052-3.514-3.743
c-0.012,0.004-0.023,0.013-0.033,0.014c-0.855-3.094-2.835-5.229-4.617-4.843c-1.389,0.3-2.256,2.055-2.333,4.318
c-0.495-0.408-1.028-0.6-1.539-0.488c-0.959,0.206-1.557,1.412-1.619,2.966c-0.567-0.415-1.169-0.608-1.745-0.484
c-1.413,0.306-2.2,2.346-1.98,4.802c-0.369-0.147-0.744-0.207-1.109-0.129c-1.637,0.355-2.442,3.036-1.802,5.993
c0.048,0.218,0.113,0.415,0.174,0.622c-0.722,0.723-1.013,2.283-0.644,3.984c0.346,1.595,1.17,2.843,2.057,3.291
c-0.162,0.92-0.143,1.982,0.094,3.082c0.632,2.905,2.554,4.952,4.296,4.574c0.2-0.044,0.39-0.126,0.569-0.227
c0.494,0.929,1.2,1.548,1.91,1.619c0.63,1.739,1.775,2.963,2.939,3.135c0.673,2.367,2.28,3.978,3.762,3.658
c0.855-0.185,1.476-0.987,1.786-2.09c0.596,1.074,1.474,1.716,2.297,1.538c0.874-0.191,1.43-1.244,1.473-2.577
c0.534,0.355,1.105,0.517,1.656,0.396c1.521-0.329,2.322-2.571,1.88-5.082c0.008-0.002,0.014,0,0.021-0.002
c1.848-0.399,2.804-3.22,2.135-6.302c-0.428-1.974-1.417-3.563-2.56-4.353c0.064-0.083,0.107-0.197,0.163-0.294l8.416-1.825
h-0.042V318.81z"/>
<path fill="#634E42" d="M502.987,284.44v34.37v5.496h0.042h10.386v-38.75c-1.239,1.169-2.891,1.902-4.729,1.902
C506.311,287.458,504.236,286.258,502.987,284.44z"/>
<path fill="#81AE84" d="M549.442,261.866c0-4.596-2.966-8.53-7.217-10.327c0.973-1.284,1.555-2.834,1.555-4.522
c0-3.17-2.034-5.884-4.951-7.144c1.017-1.506,1.634-3.273,1.634-5.179c0-4.67-3.54-8.561-8.279-9.543
c0.43-1.065,0.696-2.206,0.696-3.41c0-5.411-4.744-9.795-10.608-9.795c-0.431,0-0.835,0.069-1.25,0.118
c-1.071-2.77-3.909-4.759-7.281-4.759c-3.164,0-5.864,1.747-7.079,4.245c-1.674-1.145-3.693-1.816-5.874-1.816
c-5.762,0-10.428,4.665-10.428,10.427c0,0.666,0.079,1.318,0.198,1.949c-1.965,0.929-3.426,2.735-3.855,4.927
c-3.549,0.8-6.339,3.58-7.143,7.13c-4.759,0.508-8.472,4.482-8.472,9.373c0,2.83,1.264,5.338,3.224,7.075
c-2.275,1.14-3.855,3.471-3.855,6.195c0,2.894,1.768,5.366,4.275,6.414c-0.893,1.445-1.433,3.134-1.433,4.961
c0,5.025,3.916,9.088,8.853,9.413c0,0.025-0.006,0.045-0.006,0.065c0,6.11,4.947,11.058,11.06,11.058
c3.914,0,7.33-2.039,9.296-5.105c0.145,0.286,0.308,0.561,0.487,0.822c1.249,1.818,3.324,3.018,5.698,3.018
c1.839,0,3.49-0.733,4.729-1.902c0.976-0.92,1.701-2.104,2.019-3.454c1.268,1.709,3.283,2.829,5.572,2.829
c2.643,0,4.908-1.487,6.088-3.654c0.869,0.297,1.788,0.494,2.76,0.494c4.715,0,8.531-3.815,8.531-8.531
c0-0.039-0.011-0.078-0.011-0.117C544.585,272.539,549.442,267.755,549.442,261.866z"/>
</g>
<g class="contact">
<polygon fill="#E19190" points="323.274,315.865 323.274,383.485 378.57,410.467 378.57,342.846 "/>
<polygon fill="#576D88" points="344.127,339.484 344.127,348.713 351.673,352.396 351.673,343.166 "/>
<polygon fill="#E7A7A6" points="378.57,342.849 378.57,410.469 471.507,365.832 471.507,298.877 "/>
<polygon fill="#E1E1E5" points="479.992,307.993 478.396,308.748 478.396,323.463 479.992,322.697 "/>
<polygon fill="#E1E1E5" points="419.792,342.757 419.792,376.337 465.945,354.17 465.945,320.92 "/>
<polygon fill="#798AA0" points="421.202,343.941 421.202,374.003 464.421,353.149 464.421,323.384 "/>
<polygon fill="#E1E1E5" points="413.26,346.012 395.126,354.591 395.126,402.516 413.26,393.807 "/>
<polygon fill="#798AA0" points="412.034,348.044 396.352,355.465 396.352,389.695 412.034,382.163 "/>
<polygon fill="#D9D9DF" points="323.276,315.866 378.576,342.849 471.511,298.875 417.217,273.874 "/>
<polygon fill="#576D88" points="382.776,303.51 402.701,313.232 436.186,297.388 416.624,288.379 "/>
<polygon fill="#E1E1E5" points="468.005,302.13 466.36,302.876 478.394,308.754 479.994,307.996 "/>
<polygon fill="#576D88" points="417.456,281.649 459.75,301.07 464.018,299.051 417.101,277.5 331.67,315.642 336.277,317.89
"/>
<polygon fill="#D9D9DF" points="466.365,302.877 466.365,317.592 478.397,323.463 478.397,308.749 "/>
<polygon fill="#ABABAA" points="466.36,302.879 466.36,317.591 464.27,317.084 464.27,302.477 "/>
<polygon fill="#ABABAA" points="378.571,410.471 323.272,383.482 310.109,383.482 361.236,410.5 "/>
</g>
<g class="work">
<polygon fill="#D5C8B2" points="330.181,352.667 330.181,436.629 141.844,528.766 141.844,422.516 177.281,422.531
177.281,404.978 212.69,404.978 212.69,387.539 247.293,387.539 247.293,370.104 283.238,370.641 283.238,353.741 "/>
<polygon fill="#CABA9F" points="141.833,422.523 53.313,378.932 53.313,479.658 141.833,528.758 "/>
<polygon fill="#575756" points="212.713,405.078 124.804,361.571 88.759,361.471 177.29,405.071 "/>
<polygon fill="#797978" points="212.698,387.636 212.692,405.065 124.772,361.573 124.809,343.564 "/>
<polygon fill="#575756" points="177.276,422.531 88.834,379.024 53.322,378.924 141.853,422.524 "/>
<polygon fill="#797978" points="177.297,405.063 177.255,422.519 88.813,379.026 88.781,361.469 "/>
<polygon fill="#575756" points="247.3,387.629 159.236,343.289 124.816,343.57 212.692,387.629 "/>
<polygon fill="#797978" points="247.294,370.189 247.294,387.623 159.257,343.301 159.242,326.122 "/>
<polygon fill="#575756" points="283.242,370.735 195.253,327.204 159.238,326.125 247.3,370.208 "/>
<polygon fill="#575756" points="330.183,352.753 237.099,309.099 195.257,310.04 283.22,353.831 "/>
<polygon fill="#797978" points="283.242,353.831 283.236,370.735 195.246,327.207 195.253,310.038 "/>
<polygon fill="#D5C8B2" points="255.452,334.799 272.72,334.448 267.819,265.029 255.452,265.029 "/>
<polygon fill="#CABA9F" points="243.668,329.11 255.46,334.755 255.46,265.031 248.043,263.045 "/>
<polygon fill="#575756" points="267.825,265.031 255.46,265.036 248.049,263.045 259.594,263.045 "/>
<g>
<polygon fill="#575756" points="224.034,488.68 170.469,514.657 170.469,455.978 224.134,430.006 "/>
<polygon fill="#797978" points="224.034,488.68 170.469,514.657 170.469,510.574 224.034,484.595 "/>
<polygon fill="#797978" points="224.034,480.861 170.469,506.842 170.469,502.757 224.034,476.779 "/>
<polygon fill="#797978" points="224.034,473.044 170.469,499.023 170.469,494.941 224.034,468.961 "/>
<polygon fill="#797978" points="224.034,465.228 170.469,491.206 170.469,487.124 224.034,461.145 "/>
<polygon fill="#797978" points="224.034,457.41 170.469,483.391 170.469,479.306 224.034,453.327 "/>
<polygon fill="#797978" points="224.034,449.594 170.469,475.573 170.469,471.49 224.034,445.51 "/>
<polygon fill="#797978" points="224.034,441.776 170.469,467.756 170.469,463.674 224.034,437.694 "/>
<polygon fill="#797978" points="224.034,433.961 170.469,459.939 170.469,455.856 224.034,429.876 "/>
</g>
<g>
<polygon fill="#575756" points="313.025,445.026 263.011,469.282 263.011,414.492 313.119,390.241 "/>
<polygon fill="#797978" points="313.025,445.026 263.011,469.282 263.011,465.47 313.025,441.212 "/>
<polygon fill="#797978" points="313.025,437.727 263.011,461.984 263.011,458.171 313.025,433.915 "/>
<polygon fill="#797978" points="313.025,430.427 263.011,454.685 263.011,450.873 313.025,426.614 "/>
<polygon fill="#797978" points="313.025,423.13 263.011,447.386 263.011,443.574 313.025,419.316 "/>
<polygon fill="#797978" points="313.025,415.829 263.011,440.088 263.011,436.273 313.025,412.017 "/>
<polygon fill="#797978" points="313.025,408.531 263.011,432.789 263.011,428.977 313.025,404.718 "/>
<polygon fill="#797978" points="313.025,401.231 263.011,425.489 263.011,421.678 313.025,397.42 "/>
<polygon fill="#797978" points="313.025,393.935 263.011,418.19 263.011,414.379 313.025,390.12 "/>
</g>
<polygon fill="#ABABAA" points="141.797,528.752 53.281,479.652 29,479.652 110.32,528.832 "/>
</g>
<g class="about">
<polygon fill="#798AA0" points="750.926,326.083 750.926,404.376 691.513,432.475 691.513,353.721 "/>
<polygon fill="#E1E1E5" points="735.656,354.756 713.323,365.145 713.323,422.307 735.656,411.745 "/>
<polygon fill="#576D88" points="691.513,353.72 691.513,432.474 597.56,387.8 597.56,311.595 "/>
<polygon fill="#D9D9DF" points="617.513,347.591 617.513,360.963 601.56,353.378 601.56,340.439 "/>
<polygon fill="#D9D9DF" points="639.513,357.258 639.513,370.629 623.56,363.044 623.56,350.105 "/>
<polygon fill="#D9D9DF" points="661.513,366.924 661.513,380.296 645.56,372.711 645.56,359.772 "/>
<polygon fill="#D9D9DF" points="683.513,376.591 683.513,389.962 667.56,382.377 667.56,369.439 "/>
<polygon fill="#E7A7A6" points="750.925,326.084 718.686,287.855 695.659,296.606 691.515,353.715 "/>
<polygon fill="#E19190" points="695.663,296.61 691.51,353.721 597.56,311.589 597.56,249.174 "/>
<polygon fill="#EDBDBC" points="718.688,287.856 597.563,233.053 597.563,249.173 695.657,296.61 "/>
<polygon fill="#798AA0" points="597.56,173.183 597.56,387.8 564.861,402.538 564.861,186.54 "/>
<polygon fill="#576D88" points="564.861,186.54 564.86,402.538 519.46,382.403 519.46,164.561 "/>
<polygon fill="#D9D9DF" points="536.195,202.642 536.195,241.032 528.126,237.453 528.126,198.735 "/>
<polygon fill="#D9D9DF" points="551.861,208.309 551.861,246.699 543.792,243.12 543.792,204.402 "/>
<polygon fill="#D9D9DF" points="536.195,256.309 536.195,294.699 528.126,291.12 528.126,252.402 "/>
<polygon fill="#D9D9DF" points="551.861,261.976 551.861,300.366 543.792,296.787 543.792,258.069 "/>
<polygon fill="#D9D9DF" points="536.195,309.976 536.195,348.366 528.126,344.787 528.126,306.069 "/>
<polygon fill="#D9D9DF" points="551.861,315.643 551.861,354.033 543.792,350.454 543.792,311.736 "/>
<polygon fill="#E7A7A6" points="597.559,173.184 564.859,186.541 555.649,102.719 "/>
<polygon fill="#E19190" points="519.46,164.562 564.859,186.54 555.65,102.722 "/>
<polygon fill="#ABABAA" points="519.407,382.439 498.485,382.45 540.376,402.548 564.876,402.548 "/>
<polygon fill="#ABABAA" points="691.513,432.474 669.834,432.474 586.157,392.939 597.563,387.798 "/>
</g>
<g>
<path fill="#ABABAA" d="M689.987,525.81l-9.145,1.983c-0.385-0.433-0.822-0.721-1.267-0.792c0.379-0.752,0.498-1.841,0.247-2.995
c-0.289-1.332-0.986-2.379-1.771-2.831c-0.005-0.458-0.047-0.935-0.153-1.424c-0.516-2.377-2.087-4.052-3.514-3.743
c-0.012,0.004-0.023,0.013-0.033,0.014c-0.855-3.094-2.835-5.228-4.617-4.843c-1.389,0.3-2.256,2.055-2.333,4.318
c-0.495-0.408-1.028-0.6-1.539-0.488c-0.959,0.206-1.557,1.412-1.619,2.966c-0.567-0.415-1.169-0.608-1.745-0.484
c-1.413,0.306-2.2,2.346-1.98,4.802c-0.369-0.148-0.744-0.207-1.109-0.129c-1.637,0.354-2.442,3.036-1.802,5.993
c0.048,0.218,0.113,0.415,0.174,0.622c-0.722,0.723-1.013,2.283-0.644,3.984c0.346,1.595,1.17,2.843,2.057,3.291
c-0.162,0.92-0.143,1.982,0.094,3.082c0.632,2.905,2.554,4.952,4.296,4.574c0.2-0.044,0.39-0.126,0.569-0.227
c0.494,0.929,1.2,1.548,1.91,1.619c0.63,1.739,1.775,2.963,2.939,3.135c0.673,2.367,2.28,3.979,3.762,3.658
c0.855-0.185,1.477-0.987,1.786-2.09c0.596,1.074,1.474,1.716,2.297,1.538c0.874-0.192,1.43-1.244,1.473-2.577
c0.534,0.355,1.104,0.517,1.656,0.396c1.521-0.329,2.322-2.571,1.88-5.082c0.008-0.002,0.014,0,0.021-0.002
c1.848-0.399,2.804-3.22,2.135-6.302c-0.428-1.974-1.417-3.563-2.56-4.352c0.064-0.083,0.107-0.197,0.163-0.294l8.416-1.825
h-0.042V525.81z"/>
<path fill="#634E42" d="M689.987,491.44v34.37v5.496h0.042h10.386v-38.75c-1.239,1.169-2.891,1.902-4.729,1.902
C693.311,494.458,691.236,493.258,689.987,491.44z"/>
<path fill="#81AE84" d="M736.442,468.866c0-4.596-2.966-8.53-7.217-10.327c0.973-1.284,1.555-2.834,1.555-4.522
c0-3.17-2.034-5.884-4.951-7.144c1.017-1.506,1.634-3.273,1.634-5.179c0-4.67-3.54-8.561-8.279-9.543
c0.43-1.065,0.696-2.206,0.696-3.41c0-5.411-4.744-9.795-10.608-9.795c-0.431,0-0.835,0.069-1.25,0.118
c-1.071-2.77-3.909-4.759-7.281-4.759c-3.164,0-5.864,1.747-7.079,4.245c-1.674-1.145-3.693-1.816-5.874-1.816
c-5.762,0-10.428,4.665-10.428,10.427c0,0.666,0.079,1.318,0.198,1.949c-1.965,0.929-3.426,2.735-3.855,4.927
c-3.549,0.8-6.339,3.58-7.143,7.13c-4.759,0.508-8.472,4.482-8.472,9.373c0,2.83,1.264,5.338,3.224,7.075
c-2.275,1.14-3.855,3.471-3.855,6.195c0,2.894,1.768,5.366,4.275,6.414c-0.893,1.445-1.433,3.134-1.433,4.961
c0,5.025,3.916,9.088,8.852,9.413c0,0.025-0.006,0.045-0.006,0.065c0,6.11,4.947,11.058,11.06,11.058
c3.914,0,7.33-2.039,9.296-5.105c0.144,0.286,0.308,0.561,0.487,0.822c1.249,1.818,3.324,3.018,5.698,3.018
c1.839,0,3.49-0.733,4.729-1.902c0.976-0.92,1.701-2.104,2.019-3.454c1.268,1.709,3.283,2.829,5.572,2.829
c2.643,0,4.908-1.487,6.088-3.654c0.869,0.297,1.788,0.494,2.76,0.494c4.715,0,8.531-3.815,8.531-8.531
c0-0.039-0.011-0.078-0.011-0.117C731.585,479.539,736.442,474.755,736.442,468.866z"/>
</g>
<g>
<path fill="#ABABAA" d="M110.487,562.31l-9.145,1.983c-0.385-0.433-0.822-0.721-1.267-0.792c0.379-0.752,0.498-1.841,0.247-2.995
c-0.289-1.332-0.986-2.379-1.771-2.831c-0.005-0.458-0.047-0.935-0.153-1.424c-0.516-2.377-2.087-4.052-3.514-3.743
c-0.012,0.004-0.023,0.013-0.033,0.014c-0.855-3.094-2.835-5.228-4.617-4.843c-1.389,0.3-2.256,2.055-2.333,4.318
c-0.495-0.408-1.028-0.6-1.539-0.488c-0.959,0.206-1.557,1.412-1.619,2.966c-0.567-0.415-1.169-0.608-1.745-0.484
c-1.413,0.306-2.2,2.346-1.98,4.802c-0.369-0.148-0.744-0.207-1.109-0.129c-1.637,0.354-2.442,3.036-1.802,5.993
c0.048,0.218,0.113,0.415,0.174,0.622c-0.722,0.723-1.013,2.283-0.644,3.984c0.346,1.595,1.17,2.843,2.057,3.291
c-0.162,0.92-0.144,1.982,0.094,3.082c0.632,2.905,2.554,4.952,4.296,4.574c0.2-0.044,0.39-0.126,0.569-0.227
c0.494,0.929,1.2,1.548,1.91,1.619c0.63,1.739,1.775,2.963,2.938,3.135c0.673,2.367,2.28,3.979,3.762,3.658
c0.855-0.185,1.476-0.987,1.786-2.09c0.596,1.074,1.474,1.716,2.297,1.538c0.874-0.192,1.43-1.244,1.473-2.577
c0.534,0.355,1.104,0.517,1.656,0.396c1.52-0.329,2.322-2.571,1.88-5.082c0.008-0.002,0.014,0,0.021-0.002
c1.848-0.399,2.804-3.22,2.135-6.302c-0.428-1.974-1.417-3.563-2.561-4.352c0.064-0.083,0.107-0.197,0.163-0.294l8.416-1.825
h-0.042V562.31z"/>
<path fill="#634E42" d="M110.487,527.94v34.37v5.496h0.042h10.386v-38.75c-1.239,1.169-2.891,1.902-4.73,1.902
C113.812,530.958,111.736,529.758,110.487,527.94z"/>
<path fill="#81AE84" d="M156.942,505.366c0-4.596-2.966-8.53-7.217-10.327c0.973-1.284,1.555-2.834,1.555-4.522
c0-3.17-2.034-5.884-4.951-7.144c1.017-1.506,1.634-3.273,1.634-5.179c0-4.67-3.54-8.561-8.279-9.543
c0.43-1.065,0.696-2.206,0.696-3.41c0-5.411-4.744-9.795-10.608-9.795c-0.431,0-0.835,0.069-1.25,0.118
c-1.071-2.77-3.909-4.759-7.281-4.759c-3.164,0-5.864,1.747-7.079,4.245c-1.674-1.145-3.693-1.816-5.874-1.816
c-5.762,0-10.428,4.665-10.428,10.427c0,0.666,0.079,1.318,0.198,1.949c-1.965,0.929-3.426,2.735-3.855,4.927
c-3.549,0.8-6.339,3.58-7.144,7.13c-4.759,0.508-8.472,4.482-8.472,9.373c0,2.83,1.264,5.338,3.224,7.075
c-2.275,1.14-3.855,3.471-3.855,6.195c0,2.894,1.768,5.366,4.275,6.414c-0.893,1.445-1.433,3.134-1.433,4.961
c0,5.025,3.916,9.088,8.853,9.413c0,0.025-0.006,0.045-0.006,0.066c0,6.11,4.947,11.058,11.06,11.058
c3.914,0,7.33-2.039,9.296-5.104c0.145,0.286,0.308,0.56,0.487,0.822c1.249,1.818,3.324,3.018,5.698,3.018
c1.839,0,3.49-0.733,4.73-1.902c0.976-0.92,1.701-2.104,2.019-3.454c1.269,1.709,3.283,2.829,5.572,2.829
c2.643,0,4.908-1.487,6.088-3.654c0.869,0.297,1.788,0.494,2.76,0.494c4.715,0,8.531-3.815,8.531-8.531
c0-0.039-0.011-0.078-0.011-0.117C152.085,516.039,156.942,511.255,156.942,505.366z"/>
</g>
<g>
<g>
<polygon fill="none" points="386.887,481.157 386.964,497.627 386.889,481.157 386.888,481.157 "/>
<polygon fill="none" points="394.864,495.059 405.099,489.348 405.095,489.347 "/>
<polygon fill="none" points="363.381,512.62 363.384,512.618 363.381,512.617 "/>
<polygon fill="none" points="367.97,472.557 353.97,466.211 367.957,472.56 "/>
<polygon fill="none" points="388.688,498.503 388.674,495.596 388.688,498.503 "/>
<polygon fill="#E19190" points="390.309,481.019 390.309,481.022 421.182,464.771 "/>
<polygon fill="#E19190" points="405.095,489.347 405.099,489.348 438.26,470.849 423.418,465.566 423.418,479.119 "/>
<polygon fill="#E19190" points="386.888,481.156 386.888,481.157 386.889,481.157 386.889,481.133 367.97,472.557
367.957,472.56 "/>
<polygon fill="#E19190" points="388.61,481.914 388.611,481.912 388.61,481.912 "/>
<polygon fill="#E19190" points="363.46,529.102 363.46,529.1 363.457,529.101 "/>
<path fill="#E19190" d="M363.381,512.62v-0.003l-38.598-21.238h0l-0.002-0.002v14.49l38.675,23.233l-0.078-16.48H363.381z
M327.921,504.18c-1.084,0-1.962-1.955-1.962-4.366c0-2.412,0.878-4.367,1.962-4.367c1.083,0,1.961,1.955,1.961,4.367
C329.882,502.225,329.004,504.18,327.921,504.18z M358.297,521.521c-1.293,0-2.341-2.182-2.341-4.874
c0-2.691,1.048-4.872,2.341-4.872c1.293,0,2.342,2.181,2.342,4.872C360.639,519.339,359.591,521.521,358.297,521.521z"/>
<polygon fill="#D9D9DF" points="386.964,497.627 386.887,481.157 386.888,481.157 386.888,481.156 367.957,472.56
353.97,466.211 352.626,465.602 352.626,480.09 353.706,480.641 "/>
<path fill="#E7A7A6" d="M438.261,470.849L438.261,470.849l-33.162,18.499l-10.235,5.711l-4.447,2.48l-0.108-16.518v-0.003
l-1.698,0.894l-0.001,0.002l-0.004,0.001l0.068,13.681l0.014,2.907h0l-0.004,0.001l0.002,0.002l-25.301,14.112h-0.001
l-0.003,0.002h-0.001l0.078,16.48l0.003-0.001l17.785-10.724c-0.321-1.899-0.272-4.04,0.236-6.164
c1.276-5.332,4.923-8.522,8.145-7.122c1.927,0.835,3.258,3.125,3.75,5.97l22.615-13.636c-0.388-1.981-0.362-4.249,0.177-6.501
c1.276-5.333,4.923-8.522,8.145-7.124c2.004,0.869,3.37,3.309,3.811,6.311l10.137-6.113V470.849z"/>
<ellipse fill="#D9D9DF" cx="358.297" cy="516.647" rx="2.341" ry="4.873"/>
<ellipse fill="#D9D9DF" cx="327.921" cy="499.813" rx="1.962" ry="4.367"/>
<polygon fill="#E1E1E5" points="421.182,464.771 390.309,481.022 390.417,497.539 394.864,495.059 405.095,489.347
423.418,479.119 423.418,465.566 423.418,463.592 423.239,463.689 "/>
<polygon fill="#EDBDBC" points="363.381,512.617 363.384,512.618 363.385,512.618 388.686,498.506 388.684,498.504
388.688,498.503 388.674,495.596 388.606,481.915 388.61,481.914 388.61,481.912 388.611,481.912 390.309,481.019
421.182,464.771 423.239,463.689 423.418,463.592 388.304,451.214 352.624,465.601 352.626,465.602 353.97,466.211
367.97,472.557 386.889,481.133 386.889,481.157 386.964,497.627 353.706,480.641 352.626,480.09 324.784,491.379
324.784,491.379 "/>
<path fill="#797978" d="M389.626,505.09c-3.222-1.399-6.869,1.79-8.145,7.122c-0.508,2.124-0.557,4.265-0.236,6.164
c0.484,2.867,1.82,5.182,3.759,6.024c3.222,1.396,6.869-1.792,8.145-7.125c0.513-2.144,0.559-4.304,0.227-6.216
C392.885,508.215,391.554,505.925,389.626,505.09z"/>
<path fill="#797978" d="M424.313,483.799c-3.222-1.397-6.868,1.791-8.145,7.124c-0.539,2.252-0.565,4.52-0.177,6.501
c0.53,2.711,1.837,4.879,3.7,5.685c3.222,1.4,6.868-1.788,8.145-7.122c0.483-2.017,0.557-4.053,0.288-5.877
C427.683,487.107,426.316,484.668,424.313,483.799z"/>
</g>
<polygon fill="#ABABAA" points="324.782,505.867 302.25,505.867 341.765,529.118 363.493,529.118 "/>
</g>
<g>
<g>
<polygon fill="none" points="391.999,597.893 392.077,614.362 392.001,597.893 392,597.893 "/>
<polygon fill="none" points="399.976,611.794 410.211,606.084 410.207,606.082 "/>
<polygon fill="none" points="368.494,629.356 368.496,629.354 368.494,629.354 "/>
<polygon fill="none" points="373.082,589.292 359.082,582.946 373.069,589.296 "/>
<polygon fill="none" points="393.801,615.238 393.787,612.332 393.8,615.238 "/>
<polygon fill="#E19190" points="395.421,597.755 395.421,597.757 426.294,581.506 "/>
<polygon fill="#576D88" points="410.207,606.082 410.211,606.084 443.372,587.584 428.53,582.303 428.53,595.854 "/>
<polygon fill="#E19190" points="392,597.892 392,597.893 392.001,597.893 392.001,597.868 373.082,589.292 373.069,589.296
"/>
<polygon fill="#E19190" points="393.722,598.649 393.724,598.648 393.722,598.648 "/>
<polygon fill="#E19190" points="368.572,645.838 368.572,645.835 368.57,645.836 "/>
<path fill="#576D88" d="M368.494,629.356v-0.002l-38.598-21.239h0.001l-0.002-0.001v14.489l38.675,23.233l-0.077-16.48H368.494z
M333.034,620.915c-1.085,0-1.962-1.954-1.962-4.366c0-2.412,0.878-4.367,1.962-4.367c1.082,0,1.96,1.955,1.96,4.367
C334.994,618.961,334.116,620.915,333.034,620.915z M363.41,638.256c-1.293,0-2.342-2.182-2.342-4.874
c0-2.69,1.048-4.871,2.342-4.871c1.293,0,2.341,2.181,2.341,4.871C365.751,636.074,364.703,638.256,363.41,638.256z"/>
<polygon fill="#D9D9DF" points="392.077,614.362 391.999,597.893 392,597.893 392,597.892 373.069,589.296 359.082,582.946
357.738,582.337 357.738,596.826 358.818,597.376 "/>
<path fill="#798AA0" d="M443.374,587.584h-0.002l-33.161,18.5l-10.235,5.71l-4.447,2.482l-0.108-16.519v-0.002l-1.697,0.893
l-0.001,0.001l-0.003,0.001l0.067,13.682l0.014,2.906h0l-0.004,0.002l0.002,0.001l-25.301,14.113h-0.001l-0.002,0.001h-0.001
l0.077,16.48l0.003-0.001l17.785-10.723c-0.321-1.9-0.272-4.041,0.237-6.165c1.276-5.332,4.922-8.522,8.145-7.122
c1.927,0.835,3.258,3.126,3.75,5.97l22.614-13.636c-0.387-1.98-0.361-4.249,0.177-6.501c1.276-5.333,4.923-8.521,8.145-7.124
c2.003,0.87,3.369,3.309,3.811,6.311l10.138-6.113V587.584z"/>
<ellipse fill="#D9D9DF" cx="363.41" cy="633.383" rx="2.342" ry="4.873"/>
<ellipse fill="#D9D9DF" cx="333.034" cy="616.548" rx="1.962" ry="4.367"/>
<polygon fill="#E1E1E5" points="426.294,581.506 395.421,597.757 395.529,614.275 399.976,611.794 410.207,606.082
428.53,595.854 428.53,582.303 428.53,580.328 428.352,580.424 "/>
<polygon fill="#9AA7B8" points="368.494,629.354 368.496,629.354 368.498,629.354 393.799,615.241 393.796,615.24 393.8,615.238
393.787,612.332 393.719,598.65 393.722,598.649 393.722,598.648 393.724,598.648 395.421,597.755 426.294,581.506
428.352,580.424 428.53,580.328 393.417,567.949 357.736,582.336 357.738,582.337 359.082,582.946 373.082,589.292
392.001,597.868 392.001,597.893 392.077,614.362 358.818,597.376 357.738,596.826 329.897,608.114 329.896,608.114 "/>
<path fill="#797978" d="M394.739,621.825c-3.222-1.399-6.869,1.79-8.145,7.122c-0.509,2.124-0.558,4.265-0.237,6.165
c0.484,2.867,1.82,5.181,3.76,6.023c3.222,1.397,6.869-1.791,8.145-7.125c0.513-2.143,0.559-4.304,0.228-6.216
C397.997,624.951,396.666,622.66,394.739,621.825z"/>
<path fill="#797978" d="M429.426,600.534c-3.223-1.396-6.869,1.791-8.145,7.124c-0.538,2.252-0.564,4.521-0.177,6.501
c0.53,2.711,1.838,4.879,3.7,5.686c3.222,1.4,6.868-1.789,8.145-7.122c0.483-2.018,0.557-4.053,0.288-5.878
C432.795,603.843,431.429,601.404,429.426,600.534z"/>
</g>
<polygon fill="#ABABAA" points="329.895,622.602 307.362,622.602 346.877,645.854 368.605,645.854 "/>
</g>
<g>
<polygon fill="#ABABAA" points="515.037,493.158 494.906,493.158 565.782,538.273 589.906,538.273 "/>
<g>
<polygon fill="none" points="566.432,490.317 566.354,506.787 566.43,490.317 566.432,490.317 "/>
<polygon fill="none" points="558.455,504.219 548.221,498.508 548.223,498.507 "/>
<polygon fill="none" points="589.936,521.78 589.935,521.779 589.936,521.777 "/>
<polygon fill="none" points="585.349,481.717 599.35,475.371 585.361,481.721 "/>
<polygon fill="none" points="564.63,507.663 564.644,504.756 564.632,507.663 "/>
<polygon fill="#E19190" points="563.01,490.179 563.01,490.182 532.137,473.931 "/>
<polygon fill="#D4A139" points="548.223,498.507 548.221,498.508 515.06,480.009 529.9,474.727 529.9,488.279 "/>
<polygon fill="#E19190" points="566.432,490.316 566.432,490.317 566.43,490.317 566.43,490.293 585.349,481.717
585.361,481.721 "/>
<polygon fill="#E19190" points="564.709,491.074 564.708,491.072 564.709,491.072 "/>
<polygon fill="#E19190" points="589.859,538.262 589.859,538.26 589.861,538.261 "/>
<path fill="#DDB461" d="M589.94,521.78l-0.078,16.48l38.675-23.233v-14.49l-0.001,0.002l0,0l-38.599,21.238v0.003H589.94z
M623.438,508.974c0-2.412,0.877-4.367,1.96-4.367c1.084,0,1.962,1.955,1.962,4.367s-0.878,4.366-1.962,4.366
C624.315,513.34,623.438,511.386,623.438,508.974z M592.68,525.807c0-2.691,1.049-4.871,2.342-4.871s2.342,2.18,2.342,4.871
c0,2.692-1.049,4.874-2.342,4.874S592.68,528.499,592.68,525.807z"/>
<polygon fill="#D9D9DF" points="566.354,506.787 566.432,490.317 566.432,490.317 566.432,490.316 585.361,481.721
599.35,475.371 600.693,474.762 600.693,489.25 599.612,489.801 "/>
<path fill="#D4A139" d="M515.057,480.009h0.003l33.161,18.499l10.234,5.711l4.446,2.48l0.108-16.518v-0.003l1.698,0.894
l0.001,0.002l0.002,0.001l-0.067,13.681l-0.014,2.907h0.002l0.002,0.001l-0.002,0.002l25.303,14.113l0,0l0.002,0.001h0.003
l-0.078,16.48l-0.002-0.001l-17.786-10.724c0.321-1.899,0.271-4.04-0.236-6.164c-1.276-5.332-4.923-8.521-8.145-7.122
c-1.927,0.835-3.259,3.125-3.75,5.97l-22.616-13.636c0.389-1.982,0.362-4.249-0.176-6.501c-1.276-5.333-4.923-8.521-8.145-7.124
c-2.004,0.87-3.369,3.309-3.812,6.31l-10.138-6.113V480.009z"/>
<ellipse fill="#D9D9DF" cx="595.021" cy="525.808" rx="2.342" ry="4.873"/>
<ellipse fill="#D9D9DF" cx="625.397" cy="508.973" rx="1.962" ry="4.367"/>
<polygon fill="#E1E1E5" points="532.137,473.931 563.01,490.182 562.901,506.699 558.455,504.219 548.223,498.507 529.9,488.279
529.9,474.727 529.9,472.752 530.08,472.849 "/>
<polygon fill="#E5C788" points="589.936,521.777 589.935,521.779 589.935,521.779 564.632,507.666 564.634,507.664
564.632,507.663 564.644,504.756 564.711,491.075 564.709,491.074 564.709,491.072 564.708,491.072 563.01,490.179
532.137,473.931 530.08,472.849 529.9,472.752 565.015,460.374 600.694,474.761 600.693,474.762 599.35,475.371 585.349,481.717
566.43,490.293 566.43,490.317 566.354,506.787 599.612,489.801 600.693,489.25 628.535,500.539 628.535,500.539 "/>
<path fill="#797978" d="M563.692,514.25c3.222-1.399,6.868,1.79,8.145,7.122c0.508,2.124,0.558,4.265,0.236,6.164
c-0.484,2.867-1.82,5.182-3.76,6.024c-3.222,1.396-6.867-1.791-8.145-7.125c-0.513-2.144-0.558-4.304-0.227-6.216
C560.434,517.375,561.766,515.085,563.692,514.25z"/>
<path fill="#797978" d="M529.006,492.959c3.222-1.397,6.868,1.791,8.145,7.124c0.538,2.252,0.564,4.52,0.176,6.501
c-0.529,2.711-1.837,4.879-3.699,5.685c-3.222,1.4-6.867-1.789-8.145-7.122c-0.482-2.018-0.557-4.054-0.288-5.878
C525.637,496.268,527.002,493.829,529.006,492.959z"/>
</g>
</g>
</svg>
</body>
</html>
Found a really simple solution!
On the 's I want to open links, I just added
onclick="window.open('www.google.com')"
Related
SVG makes white lines in the browser
I made a 24x24-pixel logo. It consists of polygons that stand side by side. I'm showing this in various sizes on my web page in the range of 40 pixels and 24 pixels. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> <polygon points="6,20 4,16 2,20 "/> <polygon points="4,16 2,12 0,16 "/> <polygon points="6,12 4,8 2,12 "/> <polygon points="8,8 6,4 4,8 "/> <polygon points="10,12 8,8 6,12 "/> <polygon points="14,12 12,8 10,12 "/> <polygon points="18,12 16,8 14,12 "/> <polygon points="22,12 20,8 18,12 "/> <polygon points="12,16 10,12 8,16 "/> <polygon points="20,16 18,12 16,16 "/> <polygon points="4,16 6,20 8,16 "/> <polygon points="2,12 4,16 6,12 "/> <polygon points="0,16 2,20 4,16 "/> <polygon points="4,8 6,12 8,8 "/> <polygon points="6,4 8,8 10,4 "/> <polygon points="8,8 10,12 12,8 "/> <polygon points="16,8 18,12 20,8 "/> <polygon points="18,12 20,16 22,12 "/> <polygon points="10,12 12,16 14,12 "/> <polygon points="8,16 10,20 12,16 "/> <polygon points="16,16 18,20 20,16 "/> <polygon points="20,16 22,20 24,16 "/> <polygon points="10,20 8,16 6,20 "/> <polygon points="14,20 12,16 10,20 "/> <polygon points="18,20 16,16 14,20 "/> <polygon points="22,20 20,16 18,20 "/> </svg> But white lines form between svg elements... For example: Original svg file: bz.svg I can't combine them because in some cases I color each one separately. How can I fix this?
shape-rendering will help in most cases. But it is not guaranteed. You still might find the odd white pixel. Plus it has the disadvantage that you lose the anti-aliasing on the outside edges. Leaving the sloped edges "jaggy". Another solution, as others have suggested, is to add a thin stroke to your shapes. The width that that stroke needs to be will depend on the slope of the join line, and the 2D rendering engine that the browser uses. A third solution is to merge adjacent triangles if they are the same colour. You can write a little javascript to do the merging. You probably don't have to worry about the adjacent triangles that have different colours. If the colours are different enough, the slight white line probably won't be noticeable. A fourth option is similar. Instead of merging triangles, look for edges of triangles that later triangles abut against, and give those sides a "bulge". For example by using an extra point halfway along that side, that sticks out a bit. The idea is that the earlier triangle extends under the later one. One final solution, I can think of, is to run a filter over the shape to remove the anti-aliasing artifacts. The ideal filter for this would be a median filter, But unfortunately, SVG/CSS has no median filter. Michael Mullany created a very clever hack that simulates a median filter using a combination of the filter primitives that are available. <svg version="1.1" id="katman_1" viewBox="0 0 24 24"> <defs> <filter id="median"> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 0 1 0 0 0 0 0" result="1" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="1 0 0 0 0 0 0 0 0" result="2" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 1 0 0 0 0 0 0 0" result="3" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 1 0 0 0 0 0 0" result="4" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 0 0 0 1 0 0 0" result="5" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 0 0 0 0 0 0 1" result="6" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 0 0 0 0 0 1 0" result="7" preserveAlpha="true"/> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 0 0 0 0 1 0 0" result="8" preserveAlpha="true" /> <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 0 0 0 1 0 0 0 0" result="9" preserveAlpha="true" /> <feBlend in="1" in2="2" mode="lighten" result="a1"/> <feBlend in="1" in2="2" mode="darken" result="a2"/> <feBlend in="a2" in2="3" mode="lighten" result="a3"/> <feBlend in="a2" in2="3" mode="darken" result="a4"/> <feBlend in="a4" in2="4" mode="lighten" result="a5"/> <feBlend in="a4" in2="4" mode="darken" result="a6"/> <feBlend in="a6" in2="5" mode="lighten" result="a7"/> <feBlend in="a6" in2="5" mode="darken" result="a8"/> <feBlend in="a8" in2="6" mode="lighten" result="a9"/> <feBlend in="a8" in2="6" mode="darken" result="a10"/> <feBlend in="a10" in2="7" mode="lighten" result="a11"/> <feBlend in="a10" in2="7" mode="darken" result="a12"/> <feBlend in="a12" in2="8" mode="lighten" result="a13"/> <feBlend in="a13" in2="8" mode="darken" result="a14"/> <feBlend in="1" in2="2" mode="lighten" result="a15"/> <feBlend in="1" in2="2" mode="darken" result="a16"/> <feBlend in="a1" in2="a3" mode="lighten" result="b1"/> <feBlend in="a1" in2="a3" mode="darken" result="b2"/> <feBlend in="b2" in2="a5" mode="lighten" result="b3"/> <feBlend in="b2" in2="a5" mode="darken" result="b4"/> <feBlend in="b4" in2="a7" mode="lighten" result="b5"/> <feBlend in="b4" in2="a7" mode="darken" result="b6"/> <feBlend in="b6" in2="a9" mode="lighten" result="b7"/> <feBlend in="b6" in2="a9" mode="darken" result="b8"/> <feBlend in="b8" in2="a11" mode="lighten" result="b9"/> <feBlend in="b8" in2="a11" mode="darken" result="b10"/> <feBlend in="b10" in2="a13" mode="lighten" result="b11"/> <feBlend in="b10" in2="a13" mode="darken" result="b12"/> <feBlend in="b12" in2="a15" mode="lighten" result="b13"/> <feBlend in="b12" in2="a15" mode="darken" result="b14"/> <feBlend in="b1" in2="b3" mode="lighten" result="c1"/> <feBlend in="b1" in2="b3" mode="darken" result="c2"/> <feBlend in="c2" in2="b5" mode="lighten" result="c3"/> <feBlend in="c2" in2="b5" mode="darken" result="c4"/> <feBlend in="c4" in2="b7" mode="lighten" result="c5"/> <feBlend in="c4" in2="b7" mode="darken" result="c6"/> <feBlend in="c6" in2="b9" mode="lighten" result="c7"/> <feBlend in="c6" in2="b9" mode="darken" result="c8"/> <feBlend in="c8" in2="b11" mode="lighten" result="c9"/> <feBlend in="c8" in2="b11" mode="darken" result="c10"/> <feBlend in="c10" in2="b13" mode="lighten" result="c11"/> <feBlend in="c10" in2="b13" mode="darken" result="c12"/> <feBlend in="c1" in2="c3" mode="lighten" result="d1"/> <feBlend in="d1" in2="c3" mode="darken" result="d2"/> <feBlend in="d2" in2="c5" mode="lighten" result="d3"/> <feBlend in="d2" in2="c5" mode="darken" result="d4"/> <feBlend in="d4" in2="c7" mode="lighten" result="d5"/> <feBlend in="d4" in2="c7" mode="darken" result="d6"/> <feBlend in="d6" in2="c9" mode="lighten" result="d7"/> <feBlend in="d6" in2="c9" mode="darken" result="d8"/> <feBlend in="d8" in2="c11" mode="lighten" result="d9"/> <feBlend in="d8" in2="c11" mode="darken" result="d10"/> <feBlend in="d1" in2="d3" mode="darken" result="e1"/> <feBlend in="e1" in2="d5" mode="darken" result="e2"/> <feBlend in="e2" in2="d7" mode="darken" result="e3"/> <feBlend in="e3" in2="d9" mode="darken" result="e4"/> </filter> </defs> <g filter="url(#median)"> <polygon points="6,20 4,16 2,20 "/> <polygon points="4,16 2,12 0,16 "/> <polygon points="6,12 4,8 2,12 "/> <polygon points="8,8 6,4 4,8 "/> <polygon points="10,12 8,8 6,12 "/> <polygon points="14,12 12,8 10,12 "/> <polygon points="18,12 16,8 14,12 "/> <polygon points="22,12 20,8 18,12 "/> <polygon points="12,16 10,12 8,16 "/> <polygon points="20,16 18,12 16,16 "/> <polygon points="4,16 6,20 8,16 "/> <polygon points="2,12 4,16 6,12 "/> <polygon points="0,16 2,20 4,16 "/> <polygon points="4,8 6,12 8,8 "/> <polygon points="6,4 8,8 10,4 "/> <polygon points="8,8 10,12 12,8 "/> <polygon points="16,8 18,12 20,8 "/> <polygon points="18,12 20,16 22,12 "/> <polygon points="10,12 12,16 14,12 "/> <polygon points="8,16 10,20 12,16 "/> <polygon points="16,16 18,20 20,16 "/> <polygon points="20,16 22,20 24,16 "/> <polygon points="10,20 8,16 6,20 "/> <polygon points="14,20 12,16 10,20 "/> <polygon points="18,20 16,16 14,20 "/> <polygon points="22,20 20,16 18,20 "/> </g> </svg>
Shape Rendering is your culprit amigo.
Just add shape-rendering="crispEdges" to the svg declaration (see in the source example below)...
....or as CSS to hit more than one if you like at the element level like;
svg {
shape-rendering: crispEdges;
}
Enjoy, and cool graphic ;)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"
shape-rendering="crispEdges"> <!-- **** YOUR NEW FRIEND **** -->
<polygon points="6,20 4,16 2,20 "/>
<polygon points="4,16 2,12 0,16 "/>
<polygon points="6,12 4,8 2,12 "/>
<polygon points="8,8 6,4 4,8 "/>
<polygon points="10,12 8,8 6,12 "/>
<polygon points="14,12 12,8 10,12 "/>
<polygon points="18,12 16,8 14,12 "/>
<polygon points="22,12 20,8 18,12 "/>
<polygon points="12,16 10,12 8,16 "/>
<polygon points="20,16 18,12 16,16 "/>
<polygon points="4,16 6,20 8,16 "/>
<polygon points="2,12 4,16 6,12 "/>
<polygon points="0,16 2,20 4,16 "/>
<polygon points="4,8 6,12 8,8 "/>
<polygon points="6,4 8,8 10,4 "/>
<polygon points="8,8 10,12 12,8 "/>
<polygon points="16,8 18,12 20,8 "/>
<polygon points="18,12 20,16 22,12 "/>
<polygon points="10,12 12,16 14,12 "/>
<polygon points="8,16 10,20 12,16 "/>
<polygon points="16,16 18,20 20,16 "/>
<polygon points="20,16 22,20 24,16 "/>
<polygon points="10,20 8,16 6,20 "/>
<polygon points="14,20 12,16 10,20 "/>
<polygon points="18,20 16,16 14,20 "/>
<polygon points="22,20 20,16 18,20 "/>
</svg>
Why SVG doesn't appear correctly in Firefox?
My SVG logo appears fine in Chrome and Safari. It is made in Illustrator (not by me, I don't know the version). But in FF it is looking weird. Can't find out the reason. I do not use any filters, just SVG image. I've noticed, if I implement it with 'img' tag it looks fine, but becomes too little. Here's the code: <span> <a href="#"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="190px" height="42px" viewBox="93.496 77.153 190 42" overflow="visible" enable-background="new 93.496 77.153 190 42" xml:space="preserve"> <defs></defs> <g> <defs> <path class="logotype" id="SVGID_2_" d="M125.99,85.758c-0.725-0.005-1.443-0.016-2.154-0.034c0.072-1.776,0.818-3.368,2.002-4.549 c1.244-1.236,2.953-2,4.854-2c1.898,0,3.609,0.764,4.854,2c1.102,1.1,1.829,2.561,1.978,4.193 c-3.235,0.256-6.702,0.396-10.312,0.396C126.806,85.765,126.398,85.762,125.99,85.758 M124.41,79.744 c-1.531,1.522-2.508,3.611-2.596,5.918c-4.139-0.158-8.042-0.497-11.571-0.982l-1.538,7.253c5.02,0.72,10.882,1.135,17.144,1.135 c1.814,0,3.595-0.036,5.331-0.104l4.226,21.692c9.233,0.162,17.411,1.503,22.897,3.531l-6.656-35.073 c-3.283,0.903-7.416,1.617-12.107,2.078c-0.195-2.121-1.139-4.029-2.566-5.447c-1.605-1.602-3.832-2.591-6.281-2.591 S126.014,78.142,124.41,79.744"/> </defs> <clipPath id="SVGID_3_"> <use xlink:href="#SVGID_2_" overflow="visible"/> </clipPath> <rect x="102.238" y="77.153" clip-path="url(#SVGID_3_)" fill="#C80711" width="59.287" height="52.211"/> <path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M137.781,150.214l-13.065-12.074l-13.067,12.074l1.295-17.745l-17.588-2.688 l14.68-10.052l-8.865-15.427l17.012,5.211l6.534-16.55l6.534,16.55l17.013-5.211l-8.866,15.427l14.682,10.052l-17.59,2.688 L137.781,150.214z M124.716,133.246l8.821,8.153l-0.873-11.981l11.873-1.812l-9.912-6.787l5.986-10.414l-11.484,3.517 l-4.411-11.171l-4.411,11.171l-11.485-3.517l5.986,10.414l-9.911,6.787l11.873,1.812l-0.873,11.981L124.716,133.246z"/> <path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M146.598,169.522l-21.882-20.223l-21.88,20.223l2.166-29.714l-29.449-4.5 l24.58-16.832L85.289,92.644l28.487,8.724l10.939-27.71l10.939,27.71l28.488-8.724l-14.846,25.832l24.583,16.832l-29.451,4.5 L146.598,169.522z M124.716,144.407l17.634,16.298l-1.746-23.947l23.736-3.627l-19.812-13.566l11.965-20.818l-22.958,7.032 l-8.818-22.334l-8.817,22.334L92.94,98.746l11.964,20.818L85.092,133.13l23.736,3.627l-1.746,23.947L124.716,144.407z"/> <path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M94.051,188.764l3.037-41.644l-41.273-6.305l34.45-23.59L69.461,81.023 l39.923,12.227l15.332-38.834l15.333,38.834l39.924-12.225l-20.805,36.201l34.451,23.59l-41.275,6.305l3.037,41.644l-30.665-28.338 L94.051,188.764z M124.716,155.534l26.419,24.413l-2.615-35.878l35.559-5.431l-29.682-20.324l17.926-31.188L137.925,97.66 l-13.209-33.461L111.507,97.66L77.111,87.125l17.924,31.188l-29.681,20.324l35.558,5.431l-2.615,35.878L124.716,155.534z"/> <path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M85.701,207.058l3.863-52.984l-52.515-8.022l43.834-30.014L54.411,69.977 l50.796,15.556l19.509-49.412l19.507,49.412l50.798-15.556l-26.472,46.061l43.833,30.014l-52.515,8.022l3.863,52.984 l-39.015-36.056L85.701,207.058z M124.716,166.11l34.771,32.131l-3.443-47.217l46.8-7.15l-39.064-26.748l23.59-41.046 l-45.268,13.863l-17.386-44.037L107.33,89.943L62.062,76.078l23.592,41.048l-39.063,26.748l46.799,7.15l-3.442,47.217 L124.716,166.11z"/> <path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M171.932,225.026l-47.216-43.637l-47.217,43.637l4.677-64.124l-63.556-9.708 l53.048-36.323L39.634,59.128l61.474,18.825l23.608-59.8l23.61,59.8l61.472-18.825l-32.035,55.742l53.046,36.323l-63.552,9.708 L171.932,225.026z M124.716,176.497l42.971,39.712l-4.254-58.356l57.838-8.837l-48.277-33.056l29.154-50.731l-55.945,17.135 l-21.487-54.424l-21.487,54.424L47.285,65.228l29.153,50.731l-48.277,33.056L86,157.852l-4.254,58.356L124.716,176.497z"/> <path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M180.219,243.18l-55.503-51.295L69.212,243.18l5.497-75.378L0,156.389 l62.357-42.699L24.701,48.164l72.264,22.133L124.716,0l27.753,70.296l72.263-22.131l-37.658,65.524l62.357,42.699l-74.708,11.413 L180.219,243.18z M124.716,186.994l51.257,47.369l-5.076-69.61l68.994-10.541l-57.587-39.433l34.777-60.514l-66.734,20.438 l-25.63-64.917l-25.63,64.918L32.352,54.265l34.777,60.514L9.541,154.211l68.993,10.541l-5.075,69.61L124.716,186.994z"/> </g> <g> <defs> <path class="logotype" id="SVGID_1_" d="M98.551,89.699l-4.895,28.619c5.639-1.504,13.049-2.419,21.174-2.419c8.184,0,15.645,0.927,21.295,2.451 l-4.945-25.388c-1.736,0.068-3.517,0.104-5.331,0.104c-11.22,0-21.155-1.329-27.261-3.368H98.551z"/> </defs> <clipPath id="SVGID_4_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <rect x="87.936" y="84.597" transform="matrix(1 0.0028 -0.0028 1 0.2934 -0.3189)" clip-path="url(#SVGID_4_)" fill="#F8B700" width="53.723" height="41.486"/> <path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,93.814c-6.564,0-9.894-1.302-13.111-2.561 c-3.082-1.205-5.994-2.344-11.964-2.344c-5.974,0-8.884,1.139-11.965,2.344c-3.219,1.259-6.547,2.561-13.113,2.561 c-6.567,0-9.894-1.302-13.111-2.561c-3.082-1.205-5.993-2.344-11.964-2.344v-3.151c6.564,0,9.894,1.302,13.111,2.56 c3.082,1.205,5.992,2.345,11.964,2.345s8.884-1.14,11.966-2.345c3.218-1.258,6.544-2.56,13.112-2.56 c6.564,0,9.894,1.302,13.111,2.56c3.082,1.205,5.992,2.345,11.964,2.345V93.814z"/> <path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,99.516c-6.564,0-9.894-1.301-13.111-2.56 c-3.082-1.205-5.994-2.344-11.964-2.344c-5.974,0-8.884,1.139-11.965,2.344c-3.219,1.259-6.547,2.56-13.113,2.56 c-6.567,0-9.894-1.301-13.111-2.56c-3.082-1.205-5.993-2.344-11.964-2.344v-3.15c6.564,0,9.894,1.3,13.111,2.559 c3.082,1.203,5.992,2.344,11.964,2.344s8.884-1.141,11.966-2.344c3.218-1.259,6.544-2.559,13.112-2.559 c6.564,0,9.894,1.3,13.111,2.559c3.082,1.203,5.992,2.344,11.964,2.344V99.516z"/> <path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,105.219c-6.564,0-9.894-1.302-13.111-2.562 c-3.082-1.204-5.994-2.343-11.964-2.343c-5.974,0-8.884,1.139-11.965,2.343c-3.219,1.26-6.547,2.562-13.113,2.562 c-6.567,0-9.894-1.302-13.111-2.562c-3.082-1.204-5.993-2.343-11.964-2.343v-3.151c6.564,0,9.894,1.301,13.111,2.561 c3.082,1.205,5.992,2.343,11.964,2.343s8.884-1.138,11.966-2.343c3.218-1.26,6.544-2.561,13.112-2.561 c6.564,0,9.894,1.301,13.111,2.561c3.082,1.205,5.992,2.343,11.964,2.343V105.219z"/> <path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,110.921c-6.564,0-9.894-1.301-13.111-2.561 c-3.082-1.203-5.994-2.343-11.964-2.343c-5.974,0-8.884,1.14-11.965,2.343c-3.219,1.26-6.547,2.561-13.113,2.561 c-6.567,0-9.894-1.301-13.111-2.561c-3.082-1.203-5.993-2.343-11.964-2.343v-3.151c6.564,0,9.894,1.301,13.111,2.56 c3.082,1.205,5.992,2.343,11.964,2.343s8.884-1.138,11.966-2.343c3.218-1.259,6.544-2.56,13.112-2.56 c6.564,0,9.894,1.301,13.111,2.56c3.082,1.205,5.992,2.343,11.964,2.343V110.921z"/> <path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,116.625c-6.564,0-9.894-1.303-13.111-2.56 c-3.082-1.207-5.994-2.347-11.964-2.347c-5.974,0-8.884,1.14-11.965,2.347c-3.219,1.257-6.547,2.56-13.113,2.56 c-6.567,0-9.894-1.303-13.111-2.56c-3.082-1.207-5.993-2.347-11.964-2.347v-3.15c6.564,0,9.894,1.303,13.111,2.561 c3.082,1.205,5.992,2.345,11.964,2.345s8.884-1.14,11.966-2.345c3.218-1.258,6.544-2.561,13.112-2.561 c6.564,0,9.894,1.303,13.111,2.561c3.082,1.205,5.992,2.345,11.964,2.345V116.625z"/> <path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,122.328c-6.564,0-9.894-1.302-13.111-2.561 c-3.082-1.204-5.994-2.344-11.964-2.344c-5.974,0-8.884,1.14-11.965,2.344c-3.219,1.259-6.547,2.561-13.113,2.561 c-6.567,0-9.894-1.302-13.111-2.561c-3.082-1.204-5.993-2.344-11.964-2.344v-3.15c6.564,0,9.894,1.3,13.111,2.558 c3.082,1.206,5.992,2.345,11.964,2.345s8.884-1.139,11.966-2.345c3.218-1.258,6.544-2.558,13.112-2.558 c6.564,0,9.894,1.3,13.111,2.558c3.082,1.206,5.992,2.345,11.964,2.345V122.328z"/> </g> <path class="logotype" fill="#FFFFFF" d="M104.481,98.085c0.056-1.06,0.961-1.873,2.02-1.818c1.061,0.057,1.874,0.962,1.816,2.021 c-0.056,1.059-0.963,1.874-2.021,1.816C105.237,100.049,104.425,99.143,104.481,98.085"/> <path class="logotype" fill="#FFFFFF" d="M121.512,98.991c0.057-1.06,0.96-1.874,2.021-1.817c1.058,0.057,1.872,0.963,1.816,2.021 c-0.057,1.06-0.963,1.873-2.02,1.816C122.269,100.955,121.454,100.049,121.512,98.991"/> <path class="logotype" fill="#FFFFFF" d="M122.422,100.533c-0.112,2.086-1.057,3.921-2.504,5.219c-1.448,1.294-3.385,2.037-5.483,1.927 c-2.101-0.112-3.947-1.059-5.25-2.499c-1.302-1.442-2.047-3.367-1.937-5.454l-1.662-0.088c-0.137,2.541,0.779,4.906,2.363,6.659 c1.583,1.755,3.846,2.909,6.396,3.046c2.551,0.134,4.924-0.774,6.684-2.351c1.762-1.575,2.922-3.829,3.058-6.37L122.422,100.533z"/> <polygon fill="#E50004" points="164.267,111.836 169.359,111.836 169.359,112.818 167.371,112.818 167.371,117.895 166.293,117.895 166.293,112.818 164.267,112.818 "/> <path class="logotype red" fill="#E50004" d="M173.748,111.731c1.877,0,3.238,1.32,3.238,3.131c0,1.783-1.387,3.127-3.238,3.127 c-1.855,0-3.233-1.337-3.233-3.127C170.515,113.112,171.929,111.731,173.748,111.731 M173.756,117.049 c1.17,0,2.086-0.938,2.086-2.172c0-1.24-0.871-2.18-2.086-2.18c-1.199,0-2.086,0.939-2.086,2.18 C171.67,116.093,172.583,117.049,173.756,117.049"/> <path class="logotype red" fill="#E50004" d="M180.176,116.137v1.757h-1.068v-6.058h1.854c1.611,0,2.422,0.888,2.422,2.155 c0,1.266-0.803,2.146-2.629,2.146H180.176z M180.176,112.818v2.369h0.707c1.001,0,1.344-0.533,1.344-1.195 c0-0.664-0.336-1.174-1.344-1.174H180.176z"/> <polygon fill="#E50004" points="185.557,111.836 189.494,111.836 189.494,112.818 186.623,112.818 186.623,117.895 185.557,117.895 "/> <path class="logotype red" fill="#E50004" d="M193.855,111.731c1.879,0,3.24,1.32,3.24,3.131c0,1.783-1.387,3.127-3.24,3.127s-3.23-1.337-3.23-3.127 C190.625,113.112,192.037,111.731,193.855,111.731 M193.865,117.049c1.174,0,2.084-0.938,2.084-2.172c0-1.24-0.869-2.18-2.084-2.18 c-1.201,0-2.088,0.939-2.088,2.18C191.777,116.093,192.691,117.049,193.865,117.049"/> <path class="logotype red" fill="#E50004" d="M199.214,111.836h1.939c1.561,0,2.26,0.646,2.26,1.602c0,0.656-0.381,1.122-1.061,1.363 c0.836,0.241,1.223,0.73,1.223,1.379c0,1.076-1.043,1.714-2.422,1.714h-1.939V111.836z M200.285,112.818v1.647h0.766 c0.869,0.008,1.25-0.44,1.25-0.897c0-0.413-0.309-0.75-1.096-0.75H200.285z M200.285,115.231v1.681h0.92 c0.906,0,1.215-0.396,1.215-0.845c0-0.413-0.344-0.836-1.471-0.836H200.285z"/> <path class="logotype red" fill="#E50004" d="M207.394,113.592c1.828,0,2.629,0.881,2.629,2.147c0,1.268-0.811,2.153-2.422,2.153h-1.854v-6.057h1.068 v1.756H207.394z M207.521,116.912c1.008,0,1.346-0.508,1.346-1.172c0-0.663-0.344-1.196-1.346-1.196h-0.705v2.368H207.521z"/> <rect x="211.56" y="111.836" fill="#E50004" width="1.068" height="6.057"/> <polygon fill="#E50004" points="220.744,117.893 219.675,117.893 219.675,114.137 215.873,117.937 215.589,117.937 215.589,111.836 216.658,111.836 216.658,115.706 220.406,111.801 220.744,111.801 "/> <polygon fill="#E50004" points="231.878,116.912 231.878,111.836 230.81,111.836 230.81,116.912 228.136,116.912 228.136,111.836 227.068,111.836 227.068,117.893 231.414,117.893 231.414,118.552 232.398,118.552 232.482,116.912 "/> <polygon fill="#E50004" points="234.394,111.836 238.333,111.836 238.333,112.818 235.462,112.818 235.462,114.516 238.066,114.516 238.066,115.463 235.462,115.463 235.462,116.912 238.333,116.912 238.333,117.895 234.394,117.895 "/> <polygon fill="#E50004" points="244.634,115.507 241.675,115.507 241.675,117.893 240.607,117.893 240.607,111.836 241.675,111.836 241.675,114.559 244.634,114.559 244.634,111.844 245.703,111.844 245.703,117.893 244.634,117.893 "/> <polygon fill="#E50004" points="247.449,111.836 252.542,111.836 252.542,112.818 250.554,112.818 250.554,117.895 249.476,117.895 249.476,112.818 247.449,112.818 "/> <path class="logotype" fill="#E50004" d="M255.361,116.137v1.757h-1.068v-6.058h1.854c1.611,0,2.422,0.888,2.422,2.155 c0,1.266-0.803,2.146-2.629,2.146H255.361z M255.361,112.818v2.369h0.707c1.002,0,1.346-0.533,1.346-1.195 c0-0.664-0.336-1.174-1.346-1.174H255.361z"/> <polygon fill="#E50004" points="219.472,111.126 217.14,111.426 217.14,110.569 219.472,110.569 "/> <path class="logotype red" fill="#E50004" d="M179.885,93.099c-0.427-1.114-1.057-2.094-1.874-2.91c-0.815-0.814-1.829-1.459-3.011-1.918 c-1.18-0.455-2.529-0.686-4.015-0.686c-1.338,0-2.603,0.251-3.763,0.746c-1.155,0.498-2.18,1.188-3.046,2.051l-0.208,0.211 c0,0,0.322,1.734,2.021,2.366l0.242-0.243c0.611-0.611,1.334-1.098,2.148-1.446c0.811-0.348,1.694-0.524,2.627-0.524 c0.996,0,1.88,0.131,2.625,0.395c0.736,0.262,1.365,0.63,1.873,1.098c0.511,0.465,0.921,1.033,1.224,1.682 c0.228,0.49,0.355,1.18,0.479,1.758c-0.229-0.252-0.679-0.4-1.052-0.453c-0.559-0.076-1.127-0.116-1.686-0.116h-5.823 c0,0-0.592,1.777,0,3.161h5.823c0.498,0,1.01,0.037,1.514,0.109c0.4,0.061,0.877,0.184,1.129,0.49 c-0.176,0.579-0.389,0.968-0.734,1.456c-0.4,0.562-0.879,1.055-1.432,1.459c-0.552,0.403-1.174,0.724-1.85,0.947 c-0.674,0.224-1.385,0.339-2.112,0.339c-1.062,0-2.046-0.23-2.93-0.685c-0.886-0.451-1.646-1.075-2.257-1.856l-0.26-0.329 c-1.424,0.595-1.938,2.635-1.938,2.635l0.174,0.194c0.895,0.99,1.979,1.779,3.213,2.344c1.236,0.568,2.59,0.856,4.02,0.856 c1.336,0,2.598-0.248,3.75-0.737c1.148-0.487,2.162-1.164,3.014-2.017s1.529-1.87,2.018-3.026c0.488-1.16,0.736-2.418,0.736-3.736 C180.525,95.421,180.31,94.208,179.885,93.099"/> <path class="logotype red" fill="#E50004" d="M200.203,93.099c0.428-1.114,1.059-2.094,1.873-2.91c0.816-0.814,1.83-1.459,3.014-1.918 c1.178-0.455,2.529-0.686,4.014-0.686c1.338,0,2.605,0.251,3.764,0.746c1.154,0.498,2.178,1.188,3.045,2.051l0.207,0.211 c0,0-0.32,1.734-2.02,2.366l-0.242-0.243c-0.611-0.611-1.338-1.098-2.148-1.446c-0.811-0.348-1.697-0.524-2.625-0.524 c-1,0-1.881,0.131-2.627,0.395c-0.734,0.262-1.365,0.63-1.873,1.098c-0.512,0.465-0.922,1.033-1.223,1.682 c-0.23,0.49-0.355,1.18-0.482,1.758c0.23-0.252,0.682-0.4,1.055-0.453c0.559-0.076,1.125-0.116,1.684-0.116h5.824 c0,0,0.592,1.777,0,3.161h-5.824c-0.498,0-1.008,0.037-1.514,0.109c-0.402,0.061-0.875,0.184-1.129,0.49 c0.176,0.579,0.391,0.968,0.734,1.456c0.4,0.562,0.881,1.055,1.432,1.459c0.553,0.403,1.174,0.724,1.852,0.947 c0.674,0.224,1.385,0.339,2.111,0.339c1.062,0,2.047-0.23,2.93-0.685c0.889-0.451,1.646-1.075,2.256-1.856l0.26-0.329 c1.424,0.595,1.939,2.635,1.939,2.635l-0.174,0.194c-0.896,0.99-1.977,1.779-3.211,2.344c-1.24,0.568-2.592,0.856-4.02,0.856 c-1.338,0-2.602-0.248-3.752-0.737c-1.148-0.487-2.162-1.164-3.016-2.017c-0.85-0.853-1.527-1.87-2.016-3.026 c-0.488-1.16-0.736-2.418-0.736-3.736C199.564,95.421,199.781,94.208,200.203,93.099"/> <path class="logotype red" fill="#E50004" d="M235.472,91.248h6.102v14.592c0,0,1.51,0.681,3.068,0V91.248h6.031c0.674-1.414,0-3.158,0-3.158h-15.201 C235.472,88.089,234.785,89.76,235.472,91.248"/> <path class="logotype red" fill="#E50004" d="M267.292,95.464c0.252-0.641,0.381-1.37,0.381-2.171c0-0.802-0.129-1.53-0.381-2.17 c-0.252-0.644-0.617-1.2-1.086-1.651c-0.467-0.447-1.039-0.797-1.701-1.032c-0.652-0.231-1.377-0.351-2.16-0.351h-9.121v17.75 c0,0,1.492,0.717,3.139,0v-6.707c0.436-0.21,0.887-0.355,1.344-0.433c0.529-0.089,1.066-0.132,1.602-0.132h3.033 c0.789,0,1.516-0.123,2.168-0.365c0.662-0.244,1.234-0.605,1.703-1.071C266.675,96.666,267.041,96.105,267.292,95.464 M262.33,91.248c0.748,0,1.312,0.154,1.678,0.456c0.35,0.286,0.527,0.821,0.527,1.59c0,1.442-0.701,2.114-2.203,2.114h-3.027 c-0.572,0-1.146,0.037-1.707,0.115c-0.416,0.062-0.828,0.182-1.229,0.365l-0.006-4.641H262.33z"/> <path class="logotype red" fill="#E50004" d="M274.802,88.105h-1.17l-8.762,17.734c0,0,1.758,0.664,3.404,0l0.529-0.979 c0.047-0.096,1.137-1.521,3.656-1.521h6.246l1.123,2.501c1.346,0.591,3.506,0,3.506,0L274.802,88.105z M277.265,100.177h-3.289 c-1.996,0-2.592,0.282-3.018,0.536l3.105-6.72L277.265,100.177z"/> <path class="logotype red" fill="#E50004" d="M186.615,88.089l-0.271,2.808c-0.088,0.845-0.197,1.722-0.318,2.601c-0.121,0.858-0.283,1.71-0.477,2.533 c-0.195,0.822-0.445,1.628-0.744,2.396c-0.297,0.768-0.847,1.761-1.291,2.467c-0.31,0.487-0.598,0.873-0.855,1.145 c-0.256,0.268-0.492,0.469-0.713,0.596c-0.211,0.126-0.406,0.206-0.579,0.238c-0.202,0.033-0.39,0.052-0.565,0.052h-0.008 c0,0-0.85,1.702,0,3.16h0.008c0.237,0,0.521-0.016,0.844-0.048c0.337-0.033,0.692-0.107,1.06-0.221 c0.374-0.109,0.758-0.285,1.138-0.511c0.387-0.23,0.752-0.547,1.079-0.941c0.703-0.842,1.308-1.802,1.8-2.856 c0.486-1.046,1.075-2.401,1.404-3.547c0.329-1.145,0.6-2.33,0.8-3.525c0.182-1.082,0.327-2.15,0.434-3.187h4.325v14.591 c0,0,1.777,0.57,3.137,0v-17.75H186.615z"/> <path class="logotype red" fill="#E50004" d="M228.027,96.486h0.01l-0.008-0.005l0.008-0.008h-0.01l-0.006-0.009l5.844-8.374c0,0-2.352-0.743-3.783,0 l-4.348,6.416h-2.32c-0.965,0-1.328,0.256-1.541,0.474v-6.936c0,0-1.572-0.759-3.137,0v17.762c1.564,0.758,3.137,0,3.137,0V98.16 c0.193-0.23,0.469-0.553,1.545-0.553h1.85l4.814,8.153c1.432,0.741,3.783,0,3.783,0l-5.844-9.263L228.027,96.486z"/> </svg> </a> </span> Finally I implemented it through <img> tag like this: <img src="app/svg-icons/logo.svg" alt="logo" height="87px" width="200px" /> But it would be interesting, why it doesn't work with inline implementation.
Do you have other embedded SVGs on the page? If so then read on. Perhaps the most common cause for problems like this is that you are including multiple SVG images on the page which have clashing id attributes. This can easily happen if you have made the SVGs in an editor like Illustrator, which reuses the same ids for every image it creates. If you look at the SVG contents, you'll see that the ids in there are "SVGID_1_", "SVGID_2_", "SVGID_3_", etc. id attributes in an HTML must be unique. How duplicate ids are handled can vary from browser to browser, which is why you are getting different results in FF and Chrome. The fix is to (manually) edit each id value to make them unique. Don't forget to edit any references to them as well (eg.: the entries like xlink:href="#SVGID_1_").
Joint js rotation does not work properly with custom SVG elements
I am trying to use the rotate functionality which is proved by the Halo,
I have added an element into the stencil like this..
var customMarkup = ' <path id="path123" stroke="#000000" stroke-miterlimit="10" d="M7.2,28V15.7L20.3,4.1l9-0.6v8.8c0,0-9,5-9,8.6 c0,1.7,0,7.2,0,7.2H7.2z"/> <polyline id="polyline125" stroke="#000000" stroke-miterlimit="10" points="20.1,4.3 20.1,2.4 32.2,2.4 30.4,11.8 29.3,11.8 "/> <g id="g127"> <path id="path129" stroke="#000000" stroke-miterlimit="10" d="M32.2,2.4h1.9c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L43,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L56,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h3c2.1,0,2.7,1.2,2.7,2.2v4.9c0,0.7-0.6,1.2-1.2,1.2 H30.6"/> </g> <polyline id="polyline131" stroke="#000000" stroke-miterlimit="10" points="68.8,4 74.2,4 74.2,9.2 68.8,9.2 "/> <g id="g133"> <line id="line135" stroke="#000000" stroke-miterlimit="10" x1="68.6" y1="5.6" x2="66.3" y2="5.6"/> <line id="line137" stroke="#000000" stroke-miterlimit="10" x1="66.5" y1="7.6" x2="68.8" y2="7.6"/> <path id="path139" stroke="#000000" stroke-miterlimit="10" d="M68.6,5.6c0,0,0.1,0.8,0.1,1c0,0.3-0.1,1-0.1,1 s0.1,0.8,0.1,1s-0.1,1-0.1,1h-2.8c0,0-0.1-0.8-0.1-1s0.1-1,0.1-1s-0.1-0.8-0.1-1s0.1-1,0.1-1v0c0,0-0.1-0.8-0.1-1 c0-0.3,0.1-1,0.1-1h2.8c0,0,0.1,0.8,0.1,1C68.8,4.8,68.6,5.6,68.6,5.6L68.6,5.6z"/> </g> <line id="line141" stroke="#000000" stroke-miterlimit="10" x1="16.4" y1="7.5" x2="11.6" y2="7.5"/> <line id="line143" stroke="#000000" stroke-miterlimit="10" x1="11.6" y1="10.1" x2="13.5" y2="10.1"/> <path id="path145" stroke="#000000" stroke-miterlimit="10" d="M11.6,11.9c0,0-0.2-0.1-0.2-0.4c0-0.3,0.2-1.3,0.2-1.3 s-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3v0c0,0-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3h4.9c0,0,0.2,1,0.2,1.3c0,0.3-0.2,1.3-0.2,1.3v0" /> <g id="g147"> <line id="line149" stroke="#000000" stroke-miterlimit="10" x1="10.2" y1="7.5" x2="9" y2="7.5"/> <line id="line151" stroke="#000000" stroke-miterlimit="10" x1="9" y1="10.1" x2="10.3" y2="10.1"/> <path id="path153" stroke="#000000" stroke-miterlimit="10" d="M10.2,7.2c0,0,0.1,1.1,0.1,1.5c0,0.4-0.1,1.5-0.1,1.5 s0.1,1.1,0.1,1.5c0,0.4-0.1,1.1-0.1,1.1H9c0,0-0.1-0.7-0.1-1.1c0-0.4,0.1-1.5,0.1-1.5S8.9,9.1,8.9,8.7C8.9,8.3,9,7.2,9,7.2v0 c0,0-0.1-1.1-0.1-1.5C8.9,5.3,9,4.9,9,4.9h1.2c0,0,0.1,0.5,0.1,0.8C10.3,6.1,10.2,7.2,10.2,7.2L10.2,7.2z"/> </g> <path id="path155" stroke="#000000" stroke-miterlimit="10" d="M38.6,19.8v0.5c-0.4,0.2-0.5,0.7-0.5,0.7l0,1.4 c0,0.7,2.1,0.5,4.2,0.5c2.2,0,4.3,0.1,4.3-0.6l0-1.3c0,0,0.1-0.5-0.4-0.8v-0.5"/> <path id="path157" stroke="#000000" stroke-miterlimit="10" d="M39.2,12.9v0.4c-0.3,0.1-0.2,0.4-0.2,0.4l0,0.6 c0,0.6,6.8,0.5,6.8,0v-0.5c0,0,0.1-0.4-0.2-0.6v-0.4"/> <path id="path159" stroke="#000000" stroke-miterlimit="10" d="M38.9,13.8c-0.4,0.2-0.7,0.3-0.8,0.8c0,0.2,0,0.8,0,0.8 c0,0.7,8.5,0.7,8.5-0.1c0,0,0-0.5,0-0.7c0-0.4-0.4-0.6-0.9-0.8"/> <path id="path161" stroke="#000000" stroke-miterlimit="10" d="M38.6,15.6v2.6c-0.4,0.2-0.5,0.7-0.5,0.7l0,0.7 c0,0.7,8.5,0.7,8.5-0.1l0-0.7c0,0,0.1-0.5-0.4-0.8v-2.6"/> <path id="path163" stroke="#000000" stroke-miterlimit="10" d="M38.1,20.9c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path165" stroke="#000000" stroke-miterlimit="10" d="M38.1,18.7c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path167" stroke="#000000" stroke-miterlimit="10" d="M39,13c0.7,0,1.6,0.1,3.4,0.1c1.7,0,3.2-0.2,3.4-0.2"/> <path id="path169" stroke="#000000" stroke-miterlimit="10" d="M38.1,15.2c0,0.7,8.5,0.7,8.5-0.1"/> <polygon id="polygon171" stroke="#000000" stroke-miterlimit="10" points="46.6,24.6 38.1,24.4 38.1,22.5 40,22.9 44.8,22.9 46.6,22.4 "/> <polygon id="polygon173" stroke="#000000" stroke-miterlimit="10" points="50.8,26.2 33.8,26.1 33.8,24.7 50.8,24.5 "/> <polygon id="polygon175" stroke="#000000" stroke-miterlimit="10" points="48.3,28.1 36.3,28 36.3,26.6 48.3,26.4 "/> <polyline id="polyline177" stroke="#000000" stroke-miterlimit="10" points="17.3,6.9 17.3,3.5 20.1,3.5 "/> <path id="path179" stroke="#000000" stroke-miterlimit="10" d="M16.5,4.9c0.1-0.6,0.2-1,0.3-1c0.2,0,0.4,1.1,0.5,2.8"/> <path id="path181" stroke="#000000" stroke-miterlimit="10" d="M11.4,12c0,0-0.2,0.4-0.6,0.4c-0.6,0-0.6-0.4-0.6-0.4 V5.6c0,0,0.1-0.3,0.6-0.3c0.6,0,0.6,0.3,0.6,0.3V12z"/> <path id="path183" stroke="#000000" stroke-miterlimit="10" d="M5,10.8c0,0,0,0.2-0.4,0.2s-0.4-0.2-0.4-0.2v-4 c0,0,0.1-0.2,0.4-0.2C5,6.6,5,6.8,5,6.8V10.8z"/> <rect id="rect185" x="5" y="7" stroke="#000000" stroke-miterlimit="10" width="1.3" height="3.5"/> <polygon id="polygon187" stroke="#000000" stroke-miterlimit="10" points="8.9,11.7 6.3,11.7 6.3,8.8 6.3,6 8.9,6 "/> <rect id="rect189" x="6.7" y="33" stroke="#000000" stroke-miterlimit="10" width="59.8" height="64"/> <polygon id="polygon191" stroke="#000000" stroke-miterlimit="10" points="58.5,28.1 55.1,28.1 55.7,10.8 57.8,10.8 "/> <polygon id="polygon193" stroke="#000000" stroke-miterlimit="10" points="64.3,28.1 60.8,28.1 61.5,10.8 63.6,10.8 "/> <g id="g195"> <path id="path197" stroke="#000000" stroke-miterlimit="10" d="M72.9,31.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,28.7,1,28,1.8,28h69.6c0.8,0,1.5,0.7,1.5,1.5V31.5z"/> </g> <g id="g199"> <path id="path201" stroke="#000000" stroke-miterlimit="10" d="M72.9,100.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,97.7,1,97,1.8,97h69.6c0.8,0,1.5,0.7,1.5,1.5V100.5z"/> </g> <g id="g203"> <path id="path205" stroke="#000000" stroke-miterlimit="10" d="M68.6,72.7c0,0.8-0.7,1.5-1.5,1.5h-61 c-0.8,0-1.5-0.7-1.5-1.5v-2c0-0.8,0.7-1.5,1.5-1.5h61c0.8,0,1.5,0.7,1.5,1.5V72.7z"/> </g> <path id="path207" stroke="#000000" stroke-miterlimit="10" d="M4.3,10.4c0,0,0,0.2-0.7,0.2s-0.7-0.2-0.7-0.2V7.2 c0,0,0.2-0.1,0.7-0.1c0.7,0,0.7,0.1,0.7,0.1V10.4z"/>';
var customElement = joint.shapes.basic.Image({
markup: '<g class="scalable"><g class="rotatable"><g class="myClass">' + customMarkup+ '</g></g></g><text/>',
type: 'basic.Image1',
attrs: {
'text': { text: 'asdf' },
height: 500,
width: 100,
'.myClass': {
fill: '#ffffff'
}
}
})
The element looks fine on the Stencil and it looks good when i drag it and drop it onto the paper,
Now I would like to rotate it, and i am having a really hard time in trying to make it happen.
In case i resize the element and then try to rotate it.. and then resize it again all the transformations are completely messing up like in the image below..
I read an article and learn that the svg rotations are not similar to what is done in css so tried the following on click of a button but that did not help either.
My goal is to keep the custom SVG element within the halo when it rotates and not allow it to skew up
I also tried to do the rotation on the click of a button instead of using the Halo like as follows.. but does not help
jQuery('#btn-rotate').on('mousedown', _.bind(function (evt) {
var x = this.selection.models[0].attributes.position.x;
var y = this.selection.models[0].attributes.position.y
var height = this.selection.models[0].attributes.size.height;
var width = this.selection.models[0].attributes.size.width;
this.selection.models[0].rotate(93, [false, { x: x+width/2, y: y+height/2}]);
}, this));
Would really appreciate your help.
Thanks
Vishu
It's not supported to nest the rotatable group into the scalable group in JointJS. The groups can be omitted (together or individually) or the scalable group can be a child of the rotatable group. Only the following schemes can be used. <g class="rotatable"/><g class="scalable"></g></g> <g class="rotatable"></g> <g class="scalable"></g> In your case the rotatable and the scalable group needs to be swapped. <g class="rotatable"><g class="scalable"><g class="myClass"><!-- custom markup --></g></g></g><text/> For more please see demo.
SVG Cannot be aligned in the center
I have been playing with this svg whole day but cant align it in the middle of the div. Eirther it go outside the container or descrease size to very small. I changed viewBox million time and also played with css but no luck. Please help. <svg viewbox="0 0 300 300" style="border:1px solid red"> <g> <path fill="#9FC1BD" d="M241.861,379.774l-0.26-13.229h-50.975l-0.448,11.762c-0.053,0.49-0.081,0.977-0.081,1.47v8.234 c0,7.085,5.746,12.862,12.852,12.862h26.047c7.106,0,12.865-5.777,12.865-12.862v-8.234V379.774z"/> <path fill="#E4BA97" d="M241.565,366.13c-0.986-9.696-3.556-16.594-5.167-19.653c-0.222-0.448-5.262-6.989-5.262-15.911 c0-6.278,0.32-14.296,0.447-16.919c0.015-0.176,0.029-0.36,0.046-0.557c1.124-14.716,4.008-24.849,10.225-24.849v-3.328 c0-1.819-1.847-3.32-4.109-3.32h-18.159v-0.123h-25.477c-2.26,0-4.103,1.498-4.103,3.334v3.317c6.313,0,9.045,10.511,10.074,25.618 c0.057,0.786,0.095,1.604,0.148,2.403c0.138,4.124,0.367,11.131,0.374,16.348c0,0.229,0,0.444,0,0.645 c-0.127,6.609-3.21,12.072-3.278,12.164l0,0c0,0-4.68,8.537-6.457,20.451c-0.057,0.367-0.113,0.796-0.113,0.796l25.786,1.653 l25.062-1.66C241.601,366.539,241.615,366.451,241.565,366.13z"/> <path fill="#E4BA97" d="M248.079,281.336c0,0.677-0.113,1.343-0.307,1.999l-0.25,0.649l-0.015,0.035 c-0.757,1.787-2.192,3.053-3.87,3.68c-0.19,0.063-0.395,0.147-0.585,0.184c-1.305,0.345-2.708,0.32-4.054-0.166h-44.94 c-0.818,0.31-1.653,0.426-2.46,0.405c-0.274-0.024-0.543-0.031-0.803-0.078c-0.061-0.01-0.127-0.01-0.176-0.018 c-0.142-0.042-0.272-0.046-0.409-0.091c-2.009-0.473-3.778-1.869-4.656-3.917c-0.011-0.007-0.019-0.035-0.019-0.035l-0.247-0.649 c-0.204-0.656-0.299-1.322-0.299-1.999c0-2.326,1.202-4.558,3.253-5.798c0.278-0.183,0.578-0.334,0.888-0.451l0.215-0.105h0.004 l7.155-3.045l0.021-0.008l0.345-0.137l0.803-0.342c0.018,0,0.018,0,0.036-0.024l1.575-0.659l0.032-0.018l0.818-0.341l2.02-0.86 c0.299-0.184,0.588-0.357,0.892-0.55c0.116-0.081,0.246-0.162,0.367-0.247c0.817-0.529,1.621-1.113,2.375-1.706 c0.402-0.31,0.789-0.631,1.156-0.952c0.099-0.085,0.19-0.172,0.282-0.268c1.498-1.326,2.741-2.729,3.454-4.036 c0.061-0.103,0.113-0.215,0.176-0.328c0.487-0.913,0.927-1.734,1.301-2.527c1.068-2.196,1.709-4.001,2.069-5.774 c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072 c0.134,1.766,0.487,3.384,1.156,5.224c0.303,0.817,0.677,1.685,1.121,2.615c0.395,0.821,0.867,1.734,1.403,2.704 c0.052,0.113,0.105,0.225,0.176,0.328c0.733,1.35,2.052,2.816,3.63,4.219c0.205,0.17,0.409,0.342,0.627,0.536 c1.128,0.931,2.355,1.84,3.599,2.602c0.137,0.077,0.257,0.158,0.384,0.236c0.091,0.06,0.179,0.113,0.274,0.166l2.023,0.86 l3.426,1.438l1.484,0.635l1.738,0.747h0.028l4.329,1.861c0.571,0.226,1.1,0.558,1.565,0.923 C247.128,277.297,248.079,279.277,248.079,281.336z"/> <path opacity="0.2" fill="#231F20" d="M219.684,256.142c-1.734-0.715-3.595-1.597-4.86-2.531c-0.208-0.144-0.413-0.3-0.596-0.452 c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072 C218.662,252.684,219.015,254.302,219.684,256.142z"/> <path fill="#9FC1BD" d="M197.947,546.743l-5.319-137.611c0,0-2.692-19.672,5.319-21.416c8.025-1.717,14.021,1.744,12.58,15.548 c-1.449,13.802-5.245,143.479-5.245,143.479H197.947z"/> <path fill="#9FC1BD" d="M226.761,546.743l-4.137-145.204c0,0,0-11.396,10.349-12.435c10.362-1.033,6.217,19.682,5.872,26.929 c-0.341,7.264-4.835,130.71-4.835,130.71H226.761z"/> <path fill="#5C8BAA" d="M267.811,406.101l-5.302,0.641l-2.439-18.265l-0.395-3.009l-0.159-1.22l-0.406-3.003l-13.422-100.645 c-0.049-0.208-0.099-0.409-0.119-0.627c-0.346-2.883,1.717-5.526,4.596-5.862c2.904-0.359,5.534,1.707,5.879,4.601 c0.036,0.274,0.036,0.567,0.029,0.838l9.446,101.893l0.286,3.024l0.102,1.191l0.289,3.017L267.811,406.101z"/> <path fill="#E4BA97" d="M266.055,407.411c0,0,1.784,1.309,2.535-3.425c0.747-4.745,1.149-12.403-3.648-13.433 c-4.794-1.046-7.5,2.922-7.924,5.034c-0.416,2.136-1.015,5.079,0.007,5.343c1.025,0.268,1.53-0.863,1.53-0.863 c-0.423,2.556-0.321,2.404-0.67,5.051c-0.261,2.002,0.205,3.754,0.898,4.015c0.469,0.176,1.093-0.335,1.093-0.335 s-0.271,4.342,1.279,4.399c1.543,0.049,2.059-2.095,2.059-2.095s0.655,0.624,1.353,0.173 C265.414,410.725,266.055,407.411,266.055,407.411z"/> <path fill="#5C8BAA" d="M168.984,406.619l5.301,0.5l1.978-18.322l0.321-3.027l0.133-1.205l0.321-3.027l10.874-100.938 c0.046-0.208,0.078-0.409,0.099-0.634c0.282-2.89-1.854-5.467-4.745-5.742c-2.911-0.292-5.484,1.851-5.76,4.755 c-0.021,0.282-0.021,0.557,0,0.832l-6.866,102.103l-0.208,3.011l-0.078,1.219l-0.204,3.021L168.984,406.619z"/> <path fill="#E4BA97" d="M170.605,408.444c0,0-1.783,1.3-2.53-3.447c-0.747-4.734-1.149-12.372,3.645-13.415 c4.794-1.055,7.5,2.915,7.924,5.036c0.416,2.111,1.015,5.073-0.007,5.351c-1.022,0.271-1.523-0.874-1.523-0.874 c0.409,2.556,0.318,2.407,0.659,5.041c0.269,1.998-0.208,3.771-0.899,4.024c-0.465,0.176-1.1-0.328-1.1-0.328 s0.269,4.343-1.265,4.402c-1.547,0.049-2.069-2.114-2.069-2.114s-0.642,0.641-1.351,0.19 C171.247,411.769,170.605,408.444,170.605,408.444z"/> <path opacity="0.54" fill="#A87C4F" d="M223.575,226.767c-1.375-0.558-2.679-1.255-3.747-2.055 c-0.412-0.332-0.807-0.642-1.173-0.974c0.007-0.049,0.007-0.105,0.014-0.165c0.247-3.359,0.172-4.043,0.172-4.043h4.072 C222.913,219.53,222.68,222.793,223.575,226.767z"/> <path fill="#E7C1A5" d="M196.259,229.244v12.76c0,0,0.353,4.663,7.247,7.433c6.908,2.76,18.649,2.936,24.518,0.166 c5.523-2.608,8.283-4.653,8.452-11.395c0.176-6.733,0-31.399,0-31.399s-1.826-12.95-20.062-12.95 c-18.248,0-20.154,13.817-20.154,20.183C196.259,220.439,196.259,229.244,196.259,229.244z"/> <path fill="#E7C1A5" d="M239.74,226.245c0,2.234-1.494,4.082-3.335,4.082c-1.843,0-3.333-1.848-3.333-4.082 c0-2.263,1.491-4.092,3.333-4.092C238.246,222.153,239.74,223.982,239.74,226.245z"/> <path fill="#E7C1A5" d="M199.378,226.245c0,2.234-1.501,4.082-3.341,4.082c-1.844,0-3.331-1.848-3.331-4.082 c0-2.263,1.487-4.092,3.331-4.092C197.876,222.153,199.378,223.982,199.378,226.245z"/> <path fill="#9B8579" d="M229.44,213.372c-0.733-2.055-3.37-2.985-5.875-2.083l-0.204-0.578c2.815-0.987,5.791,0.099,6.644,2.453 L229.44,213.372z"/> <path fill="#9B8579" d="M209.554,212.495l0.571,0.198c-0.416,1.17-1.347,2.051-2.612,2.516c-1.244,0.452-2.682,0.441-4.036-0.052 l0.205-0.579c1.212,0.441,2.51,0.469,3.623,0.06C208.405,214.222,209.202,213.472,209.554,212.495z"/> <path fill="#F1F2F2" d="M209.554,221.24c0,1.279-1.033,2.319-2.309,2.319c-1.279,0-2.309-1.041-2.309-2.319 c0-1.251,1.03-2.298,2.309-2.298C208.521,218.941,209.554,219.988,209.554,221.24z"/> <path fill="#F1F2F2" d="M226.98,220.993c0,1.301-1.043,2.327-2.341,2.327c-1.286,0-2.333-1.026-2.333-2.327 c0-1.3,1.047-2.326,2.333-2.326C225.937,218.667,226.98,219.692,226.98,220.993z"/> <path fill="#58595B" d="M208.556,221.24c0,0.737-0.584,1.322-1.311,1.322c-0.733,0-1.322-0.585-1.322-1.322 c0-0.712,0.589-1.301,1.322-1.301C207.972,219.939,208.556,220.527,208.556,221.24z"/> <path fill="#58595B" d="M226.057,220.993c0,0.737-0.592,1.336-1.333,1.336c-0.733,0-1.326-0.6-1.326-1.336 c0-0.733,0.592-1.321,1.326-1.321C225.465,219.671,226.057,220.26,226.057,220.993z"/> <path fill="#A5826A" d="M236.448,222.029c-0.021-0.884-0.733-1.589-1.615-1.589c-0.874,0-1.585,0.705-1.593,1.589l0,0v4.882 c0,2.27-1.854,4.12-4.121,4.12H203.4c-2.267,0-4.109-1.85-4.109-4.12v-4.882h-0.004c-0.035-0.853-0.737-1.533-1.594-1.533 c-0.849,0-1.54,0.681-1.582,1.533h-0.028v17.483c0,11.138,9.03,20.168,20.182,20.168c11.152,0,20.183-9.031,20.183-20.168V222.029 L236.448,222.029z"/> <path fill="#FFFFFF" d="M207.686,232.84h17.024c0,0,0.353,9.777-8.509,9.89C207.341,242.839,207.686,232.84,207.686,232.84z"/> <path opacity="0.2" fill="#231F20" d="M219.483,232.089c0,2.059-1.667,3.726-3.729,3.726l0,0c-2.062,0-3.726-1.667-3.726-3.726 c0,0-0.303-15.041,2.954-15.086c3.264-0.046,1.932-0.046,1.932-0.046C218.965,216.957,219.483,232.089,219.483,232.089z"/> <path fill="#E7C1A5" d="M219.103,230.168c0,1.847-1.501,3.341-3.348,3.341l0,0c-1.84,0-3.342-1.495-3.342-3.341 c0,0-0.261-13.476,2.654-13.528c2.915-0.025,1.727-0.025,1.727-0.025C218.641,216.615,219.103,230.168,219.103,230.168z"/> <path fill="#A5826A" d="M262.826,198.491c-0.317-1.255-1.607-2.005-2.855-1.678c-0.416,0.089-0.761,0.307-1.036,0.572 c-0.289-0.173-0.599-0.296-0.938-0.367c0.092-0.363,0.099-0.765,0-1.177c-0.303-1.131-1.36-1.847-2.489-1.749 c0-0.183-0.013-0.373-0.066-0.553c-0.184-0.723-0.681-1.293-1.311-1.561c0.61-0.567,0.892-1.442,0.672-2.306 c-0.324-1.254-1.607-2.012-2.869-1.691c-0.599,0.145-1.079,0.532-1.381,1.015c-0.36-0.733-1.065-1.223-1.854-1.315 c-0.014-0.042-0.014-0.099-0.032-0.133c-0.42-1.625-1.893-2.658-3.479-2.609c-0.176-1.451-1.244-2.679-2.731-3.002 c-0.709-0.134-1.396-0.074-2.017,0.169c0.286-0.395,0.504-0.846,0.604-1.354c0.415-1.889-0.783-3.761-2.679-4.169 c-1.89-0.412-3.765,0.786-4.18,2.661c-0.134,0.628-0.092,1.23,0.07,1.774c-0.437,0.257-0.817,0.605-1.107,1.018 c-0.437-0.387-0.973-0.669-1.585-0.792c-1.702-0.391-3.374,0.539-4.011,2.104c-0.247-0.106-0.508-0.205-0.775-0.265 c-1.093-0.243-2.165,0.06-2.968,0.705c-0.345-1.206-1.318-2.165-2.629-2.454c-1.893-0.416-3.761,0.79-4.174,2.679 c-0.197,0.898-0.031,1.793,0.403,2.524c-0.678,0-1.333,0.19-1.89,0.539c-0.071-0.007-0.142-0.032-0.219-0.007 c0.43-0.754,0.606-1.635,0.402-2.541c-0.402-1.893-2.284-3.091-4.184-2.687c-1.29,0.296-2.266,1.251-2.608,2.468 c-0.807-0.663-1.886-0.962-2.968-0.715c-0.278,0.052-0.542,0.162-0.786,0.282c-0.627-1.564-2.312-2.502-4.011-2.129 c-0.613,0.142-1.145,0.413-1.585,0.825c-0.088-0.497-0.388-0.923-0.825-1.178c-4-2.622-6.753,0.825-6.457,1.224 c-0.631-0.236-1.318-0.306-2.023-0.145c-1.607,0.349-2.721,1.734-2.763,3.334c-1.614-0.147-3.145,0.846-3.659,2.433 c-0.715,0.119-1.347,0.588-1.665,1.258c-0.313-0.472-0.796-0.832-1.389-0.997c-1.258-0.324-2.548,0.426-2.869,1.678 c-0.219,0.881,0.063,1.738,0.677,2.323c-0.638,0.279-1.135,0.821-1.318,1.554c-0.053,0.18-0.074,0.367-0.074,0.543 c-1.121-0.091-2.182,0.627-2.485,1.755c-0.103,0.409-0.088,0.814,0.007,1.205c-0.332,0.046-0.652,0.163-0.938,0.35 c-0.282-0.265-0.638-0.476-1.033-0.582c-1.266-0.328-2.542,0.434-2.869,1.699c-0.328,1.248,0.427,2.53,1.688,2.862 c0.027,0,0.049,0,0.066,0.01c-0.084,0.575-0.024,1.125,0.145,1.639c-0.07,1.1,0.656,2.136,1.763,2.418 c0.437,0.102,0.877,0.077,1.276-0.053c0.113,0.018,0.226,0.018,0.335,0.018c0.021,0.159,0.067,0.299,0.102,0.423 c-0.278,0.381-0.5,0.796-0.627,1.254c-0.5,1.878,0.614,3.821,2.488,4.304c0.063,0.024,0.109,0.024,0.166,0.039 c0.208,0.799,0.828,1.479,1.682,1.685c0.444,0.126,0.88,0.091,1.289-0.046c0.049,0.081,0.106,0.13,0.156,0.19 c-0.275,1.244,0.465,2.481,1.698,2.815c0.607,0.152,1.195,0.05,1.703-0.218c0.116,0.25,0.257,0.465,0.419,0.67 c-0.744,0.441-1.325,1.178-1.565,2.097c-0.501,1.882,0.62,3.789,2.491,4.29c0.783,0.211,1.583,0.127,2.274-0.169 c-0.036,0.091-0.071,0.211-0.085,0.307c-0.512,1.886,0.617,3.796,2.488,4.289c1.882,0.501,3.8-0.613,4.3-2.506 c0.021-0.081,0.049-0.19,0.063-0.296c0.184,0.088,0.374,0.166,0.578,0.215c1.883,0.49,3.8-0.62,4.304-2.492 c0.441-1.682-0.413-3.401-1.946-4.103c0.014-0.549-0.099-1.089-0.321-1.568c0.987-0.406,1.787-1.248,2.076-2.355 c0.285-1.068,0.039-2.157-0.568-2.988c0.142-0.244,0.254-0.526,0.332-0.79c0.113-0.444,0.141-0.867,0.091-1.293 c1.53-0.024,2.918-1.068,3.328-2.611c0.028-0.106,0.042-0.233,0.07-0.37c0.367,0.042,0.733,0.035,1.121-0.053 c0.796-0.162,1.474-0.606,1.949-1.191c0.811,0.994,2.147,1.516,3.497,1.219c1.822-0.387,2.989-2.122,2.718-3.951 c1.656-0.561,2.665-2.306,2.288-4.067c-0.092-0.385-0.229-0.73-0.434-1.043c1.575-0.476,2.608-1.953,2.53-3.55 c0.106-0.024,0.198-0.032,0.304-0.056c0.289-0.057,0.549-0.163,0.803-0.279c0.007,1.522,0.997,2.915,2.523,3.345 c-0.204,0.324-0.341,0.687-0.426,1.089c-0.391,1.737,0.617,3.474,2.274,4.063c-0.276,1.794,0.902,3.556,2.714,3.938 c1.354,0.31,2.686-0.223,3.497-1.251c0.479,0.61,1.156,1.05,1.959,1.212c0.311,0.074,0.614,0.084,0.923,0.074 c0.007,0.01,0.007,0.01,0.007,0.01c0.406,1.572,1.79,2.591,3.327,2.626c-0.042,0.412-0.021,0.821,0.092,1.272 c0.07,0.269,0.19,0.55,0.328,0.8c-0.603,0.821-0.856,1.911-0.563,2.975c0.289,1.121,1.081,1.977,2.083,2.358 c-0.222,0.479-0.338,1.021-0.331,1.579c-1.523,0.711-2.383,2.421-1.935,4.092c0.49,1.885,2.421,2.999,4.296,2.506 c0.197-0.061,0.395-0.113,0.585-0.205c0.014,0.092,0.029,0.188,0.056,0.296c0.494,1.868,2.418,2.992,4.3,2.485 c1.875-0.483,2.993-2.4,2.503-4.29c-0.035-0.096-0.067-0.183-0.106-0.282c0.698,0.282,1.487,0.356,2.28,0.148 c1.872-0.501,2.993-2.411,2.503-4.29c-0.25-0.923-0.832-1.649-1.579-2.104c0.138-0.169,0.25-0.331,0.363-0.519 c0.542,0.423,1.29,0.6,2.016,0.423c1.254-0.328,2.009-1.604,1.688-2.873c-0.018-0.074-0.032-0.134-0.067-0.198 c0.465,0.198,1.001,0.254,1.53,0.113c1.007-0.271,1.685-1.138,1.741-2.125c1.776-0.564,2.812-2.422,2.333-4.241 c-0.084-0.325-0.218-0.627-0.38-0.899c0.063-0.18,0.113-0.367,0.127-0.567c0.483,0.229,1.036,0.3,1.597,0.134 c1.259-0.311,2.016-1.608,1.695-2.845c-0.028-0.091-0.06-0.183-0.099-0.264c0.071-0.3,0.099-0.599,0.084-0.91 c0.099,0,0.198-0.007,0.289-0.035C262.404,201.039,263.165,199.739,262.826,198.491z M203.364,195.478 c0.021,0.052,0.021,0.12,0.029,0.169c0.021,0.067,0.042,0.12,0.06,0.194c-0.018,0.021-0.038,0.029-0.067,0.046 c-0.032-0.049-0.063-0.12-0.098-0.172C203.322,195.622,203.34,195.555,203.364,195.478z M199.015,187.19 c0.021,0.032,0.046,0.057,0.078,0.103c-0.113,0.029-0.222,0.039-0.325,0.091C198.853,187.322,198.938,187.265,199.015,187.19z M177.408,199.256c-0.024,0.071-0.039,0.159-0.039,0.226c-0.018-0.066-0.031-0.141-0.053-0.201 C177.352,199.281,177.384,199.256,177.408,199.256z M233.691,186.659c0.081,0.077,0.166,0.148,0.25,0.208 c-0.109-0.024-0.214-0.074-0.328-0.103C233.642,186.736,233.67,186.718,233.691,186.659z M229.314,195.118 c0.01-0.042,0.014-0.098,0.028-0.151c0.028,0.07,0.056,0.151,0.085,0.243c-0.043,0.032-0.071,0.092-0.106,0.163 c-0.018-0.025-0.042-0.025-0.063-0.039C229.278,195.266,229.303,195.186,229.314,195.118z"/> <path fill="#E6E7E8" d="M246.641,273.381v97.775h-59.652v-97.775l17.99-7.617c1.77,4.177,6.458,7.155,11.981,7.155 c5.484,0,10.154-2.936,11.949-7.046L246.641,273.381z"/> <polygon fill="#5C8BAA" points="211.517,281.653 202.843,266.606 184.395,274.403 184.395,391.522 211.517,391.522 "/> <polygon fill="#5C8BAA" points="231.112,266.733 222.43,281.77 222.43,391.649 249.553,391.649 249.553,274.523 "/> <polygon fill="#517B93" points="211.503,281.664 197.281,267.541 204.443,262.764 213.516,276.179 "/> <polygon opacity="0.2" fill="#231F20" points="206.491,282.086 197.323,267.523 203.957,263.339 213.562,276.165 "/> <polygon fill="#5C8BAA" points="206.389,280.949 197.323,267.523 204.479,262.758 213.562,276.165 "/> <polygon fill="#517B93" points="222.462,281.664 236.694,267.541 229.532,262.764 220.467,276.179 "/> <polygon opacity="0.2" fill="#231F20" points="227.481,282.086 236.652,267.523 230.018,263.339 220.42,276.165 "/> <polygon fill="#5C8BAA" points="227.579,280.949 236.652,267.523 229.494,262.758 220.42,276.165 "/> </g> </svg>
I think your paths are drawn on that side of the viewbox. all your paths start with M[x], where x is always closer to 300 than 0. M stands for MoveTo. meaning, you're starting at the right side. Adding <g transform="translate(-75)"> seems to work.
The bounding box of the "man" image is:
x: 166.92599487304688
y: 176.1710205078125
width: 102.81298828125
height: 370.572021484375
So an appropriate bounding box would be:
viewBox="166 176 104 371"
Then if you surround it with a <div> of your desired size, it will be automatically centred.
Demo:
DIV {
width: 500px;
height: 400px;
background-color: #f7f7f7;
}
<div>
<svg width="100%" height="100%" viewBox="166 176 104 371" style="border:1px solid red">
<g>
<path fill="#9FC1BD" d="M241.861,379.774l-0.26-13.229h-50.975l-0.448,11.762c-0.053,0.49-0.081,0.977-0.081,1.47v8.234
c0,7.085,5.746,12.862,12.852,12.862h26.047c7.106,0,12.865-5.777,12.865-12.862v-8.234V379.774z"/>
<path fill="#E4BA97" d="M241.565,366.13c-0.986-9.696-3.556-16.594-5.167-19.653c-0.222-0.448-5.262-6.989-5.262-15.911
c0-6.278,0.32-14.296,0.447-16.919c0.015-0.176,0.029-0.36,0.046-0.557c1.124-14.716,4.008-24.849,10.225-24.849v-3.328
c0-1.819-1.847-3.32-4.109-3.32h-18.159v-0.123h-25.477c-2.26,0-4.103,1.498-4.103,3.334v3.317c6.313,0,9.045,10.511,10.074,25.618
c0.057,0.786,0.095,1.604,0.148,2.403c0.138,4.124,0.367,11.131,0.374,16.348c0,0.229,0,0.444,0,0.645
c-0.127,6.609-3.21,12.072-3.278,12.164l0,0c0,0-4.68,8.537-6.457,20.451c-0.057,0.367-0.113,0.796-0.113,0.796l25.786,1.653
l25.062-1.66C241.601,366.539,241.615,366.451,241.565,366.13z"/>
<path fill="#E4BA97" d="M248.079,281.336c0,0.677-0.113,1.343-0.307,1.999l-0.25,0.649l-0.015,0.035
c-0.757,1.787-2.192,3.053-3.87,3.68c-0.19,0.063-0.395,0.147-0.585,0.184c-1.305,0.345-2.708,0.32-4.054-0.166h-44.94
c-0.818,0.31-1.653,0.426-2.46,0.405c-0.274-0.024-0.543-0.031-0.803-0.078c-0.061-0.01-0.127-0.01-0.176-0.018
c-0.142-0.042-0.272-0.046-0.409-0.091c-2.009-0.473-3.778-1.869-4.656-3.917c-0.011-0.007-0.019-0.035-0.019-0.035l-0.247-0.649
c-0.204-0.656-0.299-1.322-0.299-1.999c0-2.326,1.202-4.558,3.253-5.798c0.278-0.183,0.578-0.334,0.888-0.451l0.215-0.105h0.004
l7.155-3.045l0.021-0.008l0.345-0.137l0.803-0.342c0.018,0,0.018,0,0.036-0.024l1.575-0.659l0.032-0.018l0.818-0.341l2.02-0.86
c0.299-0.184,0.588-0.357,0.892-0.55c0.116-0.081,0.246-0.162,0.367-0.247c0.817-0.529,1.621-1.113,2.375-1.706
c0.402-0.31,0.789-0.631,1.156-0.952c0.099-0.085,0.19-0.172,0.282-0.268c1.498-1.326,2.741-2.729,3.454-4.036
c0.061-0.103,0.113-0.215,0.176-0.328c0.487-0.913,0.927-1.734,1.301-2.527c1.068-2.196,1.709-4.001,2.069-5.774
c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072
c0.134,1.766,0.487,3.384,1.156,5.224c0.303,0.817,0.677,1.685,1.121,2.615c0.395,0.821,0.867,1.734,1.403,2.704
c0.052,0.113,0.105,0.225,0.176,0.328c0.733,1.35,2.052,2.816,3.63,4.219c0.205,0.17,0.409,0.342,0.627,0.536
c1.128,0.931,2.355,1.84,3.599,2.602c0.137,0.077,0.257,0.158,0.384,0.236c0.091,0.06,0.179,0.113,0.274,0.166l2.023,0.86
l3.426,1.438l1.484,0.635l1.738,0.747h0.028l4.329,1.861c0.571,0.226,1.1,0.558,1.565,0.923
C247.128,277.297,248.079,279.277,248.079,281.336z"/>
<path opacity="0.2" fill="#231F20" d="M219.684,256.142c-1.734-0.715-3.595-1.597-4.86-2.531c-0.208-0.144-0.413-0.3-0.596-0.452
c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072
C218.662,252.684,219.015,254.302,219.684,256.142z"/>
<path fill="#9FC1BD" d="M197.947,546.743l-5.319-137.611c0,0-2.692-19.672,5.319-21.416c8.025-1.717,14.021,1.744,12.58,15.548
c-1.449,13.802-5.245,143.479-5.245,143.479H197.947z"/>
<path fill="#9FC1BD" d="M226.761,546.743l-4.137-145.204c0,0,0-11.396,10.349-12.435c10.362-1.033,6.217,19.682,5.872,26.929
c-0.341,7.264-4.835,130.71-4.835,130.71H226.761z"/>
<path fill="#5C8BAA" d="M267.811,406.101l-5.302,0.641l-2.439-18.265l-0.395-3.009l-0.159-1.22l-0.406-3.003l-13.422-100.645
c-0.049-0.208-0.099-0.409-0.119-0.627c-0.346-2.883,1.717-5.526,4.596-5.862c2.904-0.359,5.534,1.707,5.879,4.601
c0.036,0.274,0.036,0.567,0.029,0.838l9.446,101.893l0.286,3.024l0.102,1.191l0.289,3.017L267.811,406.101z"/>
<path fill="#E4BA97" d="M266.055,407.411c0,0,1.784,1.309,2.535-3.425c0.747-4.745,1.149-12.403-3.648-13.433
c-4.794-1.046-7.5,2.922-7.924,5.034c-0.416,2.136-1.015,5.079,0.007,5.343c1.025,0.268,1.53-0.863,1.53-0.863
c-0.423,2.556-0.321,2.404-0.67,5.051c-0.261,2.002,0.205,3.754,0.898,4.015c0.469,0.176,1.093-0.335,1.093-0.335
s-0.271,4.342,1.279,4.399c1.543,0.049,2.059-2.095,2.059-2.095s0.655,0.624,1.353,0.173
C265.414,410.725,266.055,407.411,266.055,407.411z"/>
<path fill="#5C8BAA" d="M168.984,406.619l5.301,0.5l1.978-18.322l0.321-3.027l0.133-1.205l0.321-3.027l10.874-100.938
c0.046-0.208,0.078-0.409,0.099-0.634c0.282-2.89-1.854-5.467-4.745-5.742c-2.911-0.292-5.484,1.851-5.76,4.755
c-0.021,0.282-0.021,0.557,0,0.832l-6.866,102.103l-0.208,3.011l-0.078,1.219l-0.204,3.021L168.984,406.619z"/>
<path fill="#E4BA97" d="M170.605,408.444c0,0-1.783,1.3-2.53-3.447c-0.747-4.734-1.149-12.372,3.645-13.415
c4.794-1.055,7.5,2.915,7.924,5.036c0.416,2.111,1.015,5.073-0.007,5.351c-1.022,0.271-1.523-0.874-1.523-0.874
c0.409,2.556,0.318,2.407,0.659,5.041c0.269,1.998-0.208,3.771-0.899,4.024c-0.465,0.176-1.1-0.328-1.1-0.328
s0.269,4.343-1.265,4.402c-1.547,0.049-2.069-2.114-2.069-2.114s-0.642,0.641-1.351,0.19
C171.247,411.769,170.605,408.444,170.605,408.444z"/>
<path opacity="0.54" fill="#A87C4F" d="M223.575,226.767c-1.375-0.558-2.679-1.255-3.747-2.055
c-0.412-0.332-0.807-0.642-1.173-0.974c0.007-0.049,0.007-0.105,0.014-0.165c0.247-3.359,0.172-4.043,0.172-4.043h4.072
C222.913,219.53,222.68,222.793,223.575,226.767z"/>
<path fill="#E7C1A5" d="M196.259,229.244v12.76c0,0,0.353,4.663,7.247,7.433c6.908,2.76,18.649,2.936,24.518,0.166
c5.523-2.608,8.283-4.653,8.452-11.395c0.176-6.733,0-31.399,0-31.399s-1.826-12.95-20.062-12.95
c-18.248,0-20.154,13.817-20.154,20.183C196.259,220.439,196.259,229.244,196.259,229.244z"/>
<path fill="#E7C1A5" d="M239.74,226.245c0,2.234-1.494,4.082-3.335,4.082c-1.843,0-3.333-1.848-3.333-4.082
c0-2.263,1.491-4.092,3.333-4.092C238.246,222.153,239.74,223.982,239.74,226.245z"/>
<path fill="#E7C1A5" d="M199.378,226.245c0,2.234-1.501,4.082-3.341,4.082c-1.844,0-3.331-1.848-3.331-4.082
c0-2.263,1.487-4.092,3.331-4.092C197.876,222.153,199.378,223.982,199.378,226.245z"/>
<path fill="#9B8579" d="M229.44,213.372c-0.733-2.055-3.37-2.985-5.875-2.083l-0.204-0.578c2.815-0.987,5.791,0.099,6.644,2.453
L229.44,213.372z"/>
<path fill="#9B8579" d="M209.554,212.495l0.571,0.198c-0.416,1.17-1.347,2.051-2.612,2.516c-1.244,0.452-2.682,0.441-4.036-0.052
l0.205-0.579c1.212,0.441,2.51,0.469,3.623,0.06C208.405,214.222,209.202,213.472,209.554,212.495z"/>
<path fill="#F1F2F2" d="M209.554,221.24c0,1.279-1.033,2.319-2.309,2.319c-1.279,0-2.309-1.041-2.309-2.319
c0-1.251,1.03-2.298,2.309-2.298C208.521,218.941,209.554,219.988,209.554,221.24z"/>
<path fill="#F1F2F2" d="M226.98,220.993c0,1.301-1.043,2.327-2.341,2.327c-1.286,0-2.333-1.026-2.333-2.327
c0-1.3,1.047-2.326,2.333-2.326C225.937,218.667,226.98,219.692,226.98,220.993z"/>
<path fill="#58595B" d="M208.556,221.24c0,0.737-0.584,1.322-1.311,1.322c-0.733,0-1.322-0.585-1.322-1.322
c0-0.712,0.589-1.301,1.322-1.301C207.972,219.939,208.556,220.527,208.556,221.24z"/>
<path fill="#58595B" d="M226.057,220.993c0,0.737-0.592,1.336-1.333,1.336c-0.733,0-1.326-0.6-1.326-1.336
c0-0.733,0.592-1.321,1.326-1.321C225.465,219.671,226.057,220.26,226.057,220.993z"/>
<path fill="#A5826A" d="M236.448,222.029c-0.021-0.884-0.733-1.589-1.615-1.589c-0.874,0-1.585,0.705-1.593,1.589l0,0v4.882
c0,2.27-1.854,4.12-4.121,4.12H203.4c-2.267,0-4.109-1.85-4.109-4.12v-4.882h-0.004c-0.035-0.853-0.737-1.533-1.594-1.533
c-0.849,0-1.54,0.681-1.582,1.533h-0.028v17.483c0,11.138,9.03,20.168,20.182,20.168c11.152,0,20.183-9.031,20.183-20.168V222.029
L236.448,222.029z"/>
<path fill="#FFFFFF" d="M207.686,232.84h17.024c0,0,0.353,9.777-8.509,9.89C207.341,242.839,207.686,232.84,207.686,232.84z"/>
<path opacity="0.2" fill="#231F20" d="M219.483,232.089c0,2.059-1.667,3.726-3.729,3.726l0,0c-2.062,0-3.726-1.667-3.726-3.726
c0,0-0.303-15.041,2.954-15.086c3.264-0.046,1.932-0.046,1.932-0.046C218.965,216.957,219.483,232.089,219.483,232.089z"/>
<path fill="#E7C1A5" d="M219.103,230.168c0,1.847-1.501,3.341-3.348,3.341l0,0c-1.84,0-3.342-1.495-3.342-3.341
c0,0-0.261-13.476,2.654-13.528c2.915-0.025,1.727-0.025,1.727-0.025C218.641,216.615,219.103,230.168,219.103,230.168z"/>
<path fill="#A5826A" d="M262.826,198.491c-0.317-1.255-1.607-2.005-2.855-1.678c-0.416,0.089-0.761,0.307-1.036,0.572
c-0.289-0.173-0.599-0.296-0.938-0.367c0.092-0.363,0.099-0.765,0-1.177c-0.303-1.131-1.36-1.847-2.489-1.749
c0-0.183-0.013-0.373-0.066-0.553c-0.184-0.723-0.681-1.293-1.311-1.561c0.61-0.567,0.892-1.442,0.672-2.306
c-0.324-1.254-1.607-2.012-2.869-1.691c-0.599,0.145-1.079,0.532-1.381,1.015c-0.36-0.733-1.065-1.223-1.854-1.315
c-0.014-0.042-0.014-0.099-0.032-0.133c-0.42-1.625-1.893-2.658-3.479-2.609c-0.176-1.451-1.244-2.679-2.731-3.002
c-0.709-0.134-1.396-0.074-2.017,0.169c0.286-0.395,0.504-0.846,0.604-1.354c0.415-1.889-0.783-3.761-2.679-4.169
c-1.89-0.412-3.765,0.786-4.18,2.661c-0.134,0.628-0.092,1.23,0.07,1.774c-0.437,0.257-0.817,0.605-1.107,1.018
c-0.437-0.387-0.973-0.669-1.585-0.792c-1.702-0.391-3.374,0.539-4.011,2.104c-0.247-0.106-0.508-0.205-0.775-0.265
c-1.093-0.243-2.165,0.06-2.968,0.705c-0.345-1.206-1.318-2.165-2.629-2.454c-1.893-0.416-3.761,0.79-4.174,2.679
c-0.197,0.898-0.031,1.793,0.403,2.524c-0.678,0-1.333,0.19-1.89,0.539c-0.071-0.007-0.142-0.032-0.219-0.007
c0.43-0.754,0.606-1.635,0.402-2.541c-0.402-1.893-2.284-3.091-4.184-2.687c-1.29,0.296-2.266,1.251-2.608,2.468
c-0.807-0.663-1.886-0.962-2.968-0.715c-0.278,0.052-0.542,0.162-0.786,0.282c-0.627-1.564-2.312-2.502-4.011-2.129
c-0.613,0.142-1.145,0.413-1.585,0.825c-0.088-0.497-0.388-0.923-0.825-1.178c-4-2.622-6.753,0.825-6.457,1.224
c-0.631-0.236-1.318-0.306-2.023-0.145c-1.607,0.349-2.721,1.734-2.763,3.334c-1.614-0.147-3.145,0.846-3.659,2.433
c-0.715,0.119-1.347,0.588-1.665,1.258c-0.313-0.472-0.796-0.832-1.389-0.997c-1.258-0.324-2.548,0.426-2.869,1.678
c-0.219,0.881,0.063,1.738,0.677,2.323c-0.638,0.279-1.135,0.821-1.318,1.554c-0.053,0.18-0.074,0.367-0.074,0.543
c-1.121-0.091-2.182,0.627-2.485,1.755c-0.103,0.409-0.088,0.814,0.007,1.205c-0.332,0.046-0.652,0.163-0.938,0.35
c-0.282-0.265-0.638-0.476-1.033-0.582c-1.266-0.328-2.542,0.434-2.869,1.699c-0.328,1.248,0.427,2.53,1.688,2.862
c0.027,0,0.049,0,0.066,0.01c-0.084,0.575-0.024,1.125,0.145,1.639c-0.07,1.1,0.656,2.136,1.763,2.418
c0.437,0.102,0.877,0.077,1.276-0.053c0.113,0.018,0.226,0.018,0.335,0.018c0.021,0.159,0.067,0.299,0.102,0.423
c-0.278,0.381-0.5,0.796-0.627,1.254c-0.5,1.878,0.614,3.821,2.488,4.304c0.063,0.024,0.109,0.024,0.166,0.039
c0.208,0.799,0.828,1.479,1.682,1.685c0.444,0.126,0.88,0.091,1.289-0.046c0.049,0.081,0.106,0.13,0.156,0.19
c-0.275,1.244,0.465,2.481,1.698,2.815c0.607,0.152,1.195,0.05,1.703-0.218c0.116,0.25,0.257,0.465,0.419,0.67
c-0.744,0.441-1.325,1.178-1.565,2.097c-0.501,1.882,0.62,3.789,2.491,4.29c0.783,0.211,1.583,0.127,2.274-0.169
c-0.036,0.091-0.071,0.211-0.085,0.307c-0.512,1.886,0.617,3.796,2.488,4.289c1.882,0.501,3.8-0.613,4.3-2.506
c0.021-0.081,0.049-0.19,0.063-0.296c0.184,0.088,0.374,0.166,0.578,0.215c1.883,0.49,3.8-0.62,4.304-2.492
c0.441-1.682-0.413-3.401-1.946-4.103c0.014-0.549-0.099-1.089-0.321-1.568c0.987-0.406,1.787-1.248,2.076-2.355
c0.285-1.068,0.039-2.157-0.568-2.988c0.142-0.244,0.254-0.526,0.332-0.79c0.113-0.444,0.141-0.867,0.091-1.293
c1.53-0.024,2.918-1.068,3.328-2.611c0.028-0.106,0.042-0.233,0.07-0.37c0.367,0.042,0.733,0.035,1.121-0.053
c0.796-0.162,1.474-0.606,1.949-1.191c0.811,0.994,2.147,1.516,3.497,1.219c1.822-0.387,2.989-2.122,2.718-3.951
c1.656-0.561,2.665-2.306,2.288-4.067c-0.092-0.385-0.229-0.73-0.434-1.043c1.575-0.476,2.608-1.953,2.53-3.55
c0.106-0.024,0.198-0.032,0.304-0.056c0.289-0.057,0.549-0.163,0.803-0.279c0.007,1.522,0.997,2.915,2.523,3.345
c-0.204,0.324-0.341,0.687-0.426,1.089c-0.391,1.737,0.617,3.474,2.274,4.063c-0.276,1.794,0.902,3.556,2.714,3.938
c1.354,0.31,2.686-0.223,3.497-1.251c0.479,0.61,1.156,1.05,1.959,1.212c0.311,0.074,0.614,0.084,0.923,0.074
c0.007,0.01,0.007,0.01,0.007,0.01c0.406,1.572,1.79,2.591,3.327,2.626c-0.042,0.412-0.021,0.821,0.092,1.272
c0.07,0.269,0.19,0.55,0.328,0.8c-0.603,0.821-0.856,1.911-0.563,2.975c0.289,1.121,1.081,1.977,2.083,2.358
c-0.222,0.479-0.338,1.021-0.331,1.579c-1.523,0.711-2.383,2.421-1.935,4.092c0.49,1.885,2.421,2.999,4.296,2.506
c0.197-0.061,0.395-0.113,0.585-0.205c0.014,0.092,0.029,0.188,0.056,0.296c0.494,1.868,2.418,2.992,4.3,2.485
c1.875-0.483,2.993-2.4,2.503-4.29c-0.035-0.096-0.067-0.183-0.106-0.282c0.698,0.282,1.487,0.356,2.28,0.148
c1.872-0.501,2.993-2.411,2.503-4.29c-0.25-0.923-0.832-1.649-1.579-2.104c0.138-0.169,0.25-0.331,0.363-0.519
c0.542,0.423,1.29,0.6,2.016,0.423c1.254-0.328,2.009-1.604,1.688-2.873c-0.018-0.074-0.032-0.134-0.067-0.198
c0.465,0.198,1.001,0.254,1.53,0.113c1.007-0.271,1.685-1.138,1.741-2.125c1.776-0.564,2.812-2.422,2.333-4.241
c-0.084-0.325-0.218-0.627-0.38-0.899c0.063-0.18,0.113-0.367,0.127-0.567c0.483,0.229,1.036,0.3,1.597,0.134
c1.259-0.311,2.016-1.608,1.695-2.845c-0.028-0.091-0.06-0.183-0.099-0.264c0.071-0.3,0.099-0.599,0.084-0.91
c0.099,0,0.198-0.007,0.289-0.035C262.404,201.039,263.165,199.739,262.826,198.491z M203.364,195.478
c0.021,0.052,0.021,0.12,0.029,0.169c0.021,0.067,0.042,0.12,0.06,0.194c-0.018,0.021-0.038,0.029-0.067,0.046
c-0.032-0.049-0.063-0.12-0.098-0.172C203.322,195.622,203.34,195.555,203.364,195.478z M199.015,187.19
c0.021,0.032,0.046,0.057,0.078,0.103c-0.113,0.029-0.222,0.039-0.325,0.091C198.853,187.322,198.938,187.265,199.015,187.19z
M177.408,199.256c-0.024,0.071-0.039,0.159-0.039,0.226c-0.018-0.066-0.031-0.141-0.053-0.201
C177.352,199.281,177.384,199.256,177.408,199.256z M233.691,186.659c0.081,0.077,0.166,0.148,0.25,0.208
c-0.109-0.024-0.214-0.074-0.328-0.103C233.642,186.736,233.67,186.718,233.691,186.659z M229.314,195.118
c0.01-0.042,0.014-0.098,0.028-0.151c0.028,0.07,0.056,0.151,0.085,0.243c-0.043,0.032-0.071,0.092-0.106,0.163
c-0.018-0.025-0.042-0.025-0.063-0.039C229.278,195.266,229.303,195.186,229.314,195.118z"/>
<path fill="#E6E7E8" d="M246.641,273.381v97.775h-59.652v-97.775l17.99-7.617c1.77,4.177,6.458,7.155,11.981,7.155
c5.484,0,10.154-2.936,11.949-7.046L246.641,273.381z"/>
<polygon fill="#5C8BAA" points="211.517,281.653 202.843,266.606 184.395,274.403 184.395,391.522 211.517,391.522 "/>
<polygon fill="#5C8BAA" points="231.112,266.733 222.43,281.77 222.43,391.649 249.553,391.649 249.553,274.523 "/>
<polygon fill="#517B93" points="211.503,281.664 197.281,267.541 204.443,262.764 213.516,276.179 "/>
<polygon opacity="0.2" fill="#231F20" points="206.491,282.086 197.323,267.523 203.957,263.339 213.562,276.165 "/>
<polygon fill="#5C8BAA" points="206.389,280.949 197.323,267.523 204.479,262.758 213.562,276.165 "/>
<polygon fill="#517B93" points="222.462,281.664 236.694,267.541 229.532,262.764 220.467,276.179 "/>
<polygon opacity="0.2" fill="#231F20" points="227.481,282.086 236.652,267.523 230.018,263.339 220.42,276.165 "/>
<polygon fill="#5C8BAA" points="227.579,280.949 236.652,267.523 229.494,262.758 220.42,276.165 "/>
</g>
</svg>
</div>
SVG rendering in Safari and IE
I have a lot of trouble with an svg that is made from an Illustrator. Here is the code that the Illustrator gave me. <svg version="1.1" class="svg active" id="vertical_lines_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216.4 64.4" style="enable-background:new 0 0 216.4 64.4;" xml:space="preserve"> <use xlink:href="#I" id="svgCanvas"/> <pattern x="92.6" y="18.1" width="28.3" height="28.3" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="0 -28.3 28.3 28.3" style="overflow:visible;"> <g id="XMLID_484_"> <polygon id="XMLID_507_" class="st0" points="0,-28.3 28.3,-28.3 28.3,0 0,0 "/> <polygon id="XMLID_506_" class="st4" points="7.1,0 0,0 0,-28.3 7.1,-28.3 "/> <polygon id="XMLID_505_" class="st1" points="14.2,0 7.1,0 7.1,-28.3 14.2,-28.3 "/> <polygon id="XMLID_504_" class="st4" points="21.3,0 14.2,0 14.2,-28.3 21.3,-28.3 "/> <polygon id="XMLID_503_" class="st1" points="28.3,0 21.3,0 21.3,-28.3 28.3,-28.3 "/> </g> </pattern> <g id="XMLID_131_"> <pattern id="XMLID_28" xlink:href="#New_Pattern" patternTransform="matrix(1 0 0 1 -40.8688 -2.6535)"> </pattern> <path id="XMLID_132_" class="st2" fill="url(#XMLID_28_)" d="M74.2,39.6c8.1,3.2,20.8,4.9,33.8,4.8c13,0.1,25.8-1.6,33.8-4.8c8.1,3.2,20.8,4.9,33.8,4.8 c13,0.1,25.8-1.6,33.9-4.9c-0.1-1-0.5-3.4-1-6.5c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2c-2-7.6-2.9-11.1-7.5-11.1h-40.4 c-6.3,0-7.2,2.6-8.8,8.9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9c-0.3,1.9-0.6,4-0.8,6.1c-0.2-1.2-0.5-3.4-1-6 c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2c-2-7.6-2.9-11.1-7.5-11.1H88.8c-6.3,0-7.2,2.6-8.8,8.9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9 c-0.3,1.9-0.6,4-0.8,6.1c-0.2-1.2-0.5-3.4-1-6c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2C67,3.5,66.1,0,61.5,0H21.2 C14.9,0,14,2.6,12.4,9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9C7,35,6.7,37.2,6.5,39.5c8.1,3.3,20.9,4.9,33.9,4.9 C53.4,44.5,66.1,42.8,74.2,39.6z"/> <pattern id="XMLID_29" xlink:href="#New_Pattern" patternTransform="matrix(1 0 0 1 -40.8688 -2.6535)"> </pattern> <path id="XMLID_322_" class="st3" fill="url(#XMLID_29_)" d="M211,45.6c-0.3,0-0.6-0.1-0.8-0.1c-10.6,4.9-39.7,7.1-63.5,1.5c-1.6-0.4-3.2-0.8-4.7-1.2 c-1.6,0.7-3.5,1.3-5.7,1.8C122.9,50.9,99.1,51.7,79,47c-1.6-0.4-3.2-0.8-4.7-1.2c-1.6,0.7-3.5,1.3-5.7,1.8 C54,51.2,26.9,51.9,5.9,45.5c-0.3,0-0.6,0-0.8,0.1c-2.7,0.4-6.2,3.2-4.6,4.3c3.4,2.2,8.7,3.9,15,5.1v9.3h49.9v-9.3 c3.3-0.6,6.3-1.4,8.9-2.3c2.6,0.9,5.6,1.7,8.9,2.3v9.3H133v-9.3c3.3-0.6,6.3-1.4,8.9-2.3c2.6,0.9,5.6,1.7,8.9,2.3v9.3h49.9v-9.3 c6.3-1.2,11.6-2.9,15-5.1C217.2,48.8,213.8,46,211,45.6z"/> </g> </svg><!--end vertical_lines_svg--> I have to change the colors of the patterns .st4 and .st1 with jQuery, everything is great in FF and Chrome, but nothing renders on IE and Safari. I tried everything and did not manage to fix it. Any ideas why this is happening and how can I fix it?
Ok, I found the problem you can't have negative values to the viewBox attribute in tag. This will make the svg to disappear in IE