SVG images not working at all in Microsoft Edge - html
Here is the html code that I've tried:
<html> <img src = "Contact2.svg" alt = "contact" /> </html>
Here is the output in every browser except Edge:
Normal image
Here is the output of the same file in Edge:
Distorted Image
I've also tried using the svg tag directly in the file, but the result is the same. The svg in question is too big to attach (Stack Overflow won't let me add it), but I can find a way to upload it if necessary to diagnose the issue.
Is there really no way to include SVG files in Edge? If not, what are my options?
edit Here is the beginning of the svg file which was autogenerated by the svg creation software, vectr:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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" preserveAspectRatio="xMidYMid meet" viewBox="19 99 849.3178264315773 94" width="845.32" height="90"><defs><path d="M127.27 173.8C127.27 182.74 119.53 190 110 190C100.47 190 92.73 182.74 92.73 173.8C92.73 164.85 100.47 157.59 110 157.59C119.53 157.59 127.27 164.85 127.27 173.8Z" id="b1jyYeVtTq"></path><text id="b1lWAjMtn8" x="360.2" y="276.32" font-size="20" font-family="Open Sans" font-weight="normal" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" transform="matrix(1 0 0 1 -256.01590652958953 -115.99016726043811)" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge"><tspan x="360.2" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">1</tspan></text><style id="opensansnormalnormal">
#font-face {
font-family: "Open Sans";
font-weight: normal;
src: url("data:font/ttf;base64,AAEAAAATAQAABAAwRFNJR54SRB0AAzucAAAVdEdERUYAJgOvAAM3fAAAAB5HUE9TCzcPNwADN5wAAAA4R1NVQg4rPbcAAzfUAAADxk9TLzKhPp7JAAABuAAAAGBjbWFwKasvaAAAELQAAAQaY3Z0IA9NGKQAAB2QAAAAomZwZ21+YbYRAAAU0AAAB7RnYXNwABUAIwADN2wAAAAQZ2x5ZnQ4mUsAACWMAAEvtGhlYWT3duKmAAABPAAAADZoaGVhDcwJcwAAAXQAAAAkaG10eOg1PN0AAAIYAAAOmmtlcm5UKwl+AAFVQAABtjZsb2NhKRTc8QAAHjQAAAdWbWF4cAVDAgoAAAGYAAAAIG5hbWVzsIiFAAMLeAAABcdwb3N0AkPvbAADEUAAACYrcHJlcEO3lqQAAByEAAABCQABAAAAARmaIcf1X18PPPUACQgAAAAAAMk1MYsAAAAAyehMTPua/dUJoghiAAAACQACAAAAAAAAAAEAAAiN/agAAAms+5r+ewmiAAEAAAAAAAAAAAAAAAAAAAOjAAEAAAOqAIoAFgBWAAUAAgAQAC8AXAAAAQ4A+AADAAEAAwS2AZAABQAIBZoFMwAAAR8FmgUzAAAD0QBmAfEIAgILBgYDBQQCAgTgAALvQAAgWwAAACgAAAAAMUFTQwBAACD//QYf/hQAhAiNAlggAAGfAAAAAARIBbYAAAAgAAMEzQDBAAAAAAQUAAACFAAAAiMAmAM1AIUFKwAzBJMAgwaWAGgF1wBxAcUAhQJeAFICXgA9BGoAVgSTAGgB9gA/ApMAVAIhAJgC8AAUBJMAZgSTALwEkwBkBJMAXgSTACsEkwCFBJMAdQSTAF4EkwBoBJMAagIhAJgCIQA/BJMAaASTAHcEkwBoA28AGwcxAHkFEAAABS8AyQUMAH0F1QDJBHMAyQQhAMkF0wB9BecAyQKqAFQCI/9gBOkAyQQnAMkHOQDJBggAyQY7AH0E0QDJBjsAfQTyAMkEZABqBG0AEgXTALoEwwAAB2gAGwSeAAgEewAABJEAUgKiAKYC8AAXAqIAMwRWADEDlv/8BJ4BiQRzAF4E5wCwA88AcwTnAHMEfQBzArYAHQRiACcE6QCwAgYAogIG/5EEMwCwAgYAsAdxALAE6QCwBNUAcwTnALAE5wBzA0QAsAPRAGoC0wAfBOkApAQCAAAGOQAXBDEAJwQIAAIDvgBSAwgAPQRoAe4DCABIBJMAaAIUAAACIwCYBJMAvgSTAD8EkwB7BJMAHwRoAe4EIQB7BJ4BNQaoAGQC1QBGA/oAUgSTAGgCkwBUBqgAZAQA//oDbQB/BJMAaALHADECxwAhBJ4BiQT0ALAFPQBxAiEAmAHRACUCxwBMAwAAQgP6AFAGPQBLBj0ALgY9ABoDbwAzBRAAAAUQAAAFEAAABRAAAAUQAAAFEAAABvz//gUMAH0EcwDJBHMAyQRzAMkEcwDJAqoAPAKqAFQCqv//AqoAPAXHAC8GCADJBjsAfQY7AH0GOwB9BjsAfQY7AH0EkwCFBjsAfQXTALoF0wC6BdMAugXTALoEewAABOMAyQT6ALAEcwBeBHMAXgRzAF4EcwBeBHMAXgRzAF4G3QBeA88AcwR9AHMEfQBzBH0AcwR9AHMCBv/aAgYAqQIG/7MCBv/sBMUAcQTpALAE1QBzBNUAcwTVAHME1QBzBNUAcwSTAGgE1QBzBOkApATpAKQE6QCkBOkApAQIAAIE5wCwBAgAAgUQAAAEcwBeBRAAAARzAF4FEAAABHMAXgUMAH0DzwBzBQwAfQPPAHMFDAB9A88AcwUMAH0DzwBzBdUAyQTnAHMFxwAvBOcAcwRzAMkEfQBzBHMAyQR9AHMEcwDJBH0AcwRzAMkEfQBzBHMAyQR9AHMF0wB9BGIAJwXTAH0EYgAnBdMAfQRiACcF0wB9BGIAJwXnAMkE6QCwBecAAATpABQCqv/iAgb/kAKqACoCBv/aAqoAHgIG/8wCqgBUAgYANQKqAFQCBgCwBM0AVAQMAKICI/9gAgb/kQTpAMkEMwCwBCUAsAQnAMkCBgCjBCcAyQIGAFkEJwDJAgYAsAQnAMkCgwCwBC8AHQIX//wGCADJBOkAsAYIAMkE6QCwBggAyQTpALAFcwABBggAyQTpALAGOwB9BNUAcwY7AH0E1QBzBjsAfQTVAHMHYgB9B4kAcQTyAMkDRACwBPIAyQNEAGAE8gDJA0QAggRkAGoD0QBqBGQAagPRAGoEZABqA9EAagRkAGoD0QBqBG0AEgLTAB8EbQASAtMAHwRtABIC0wAfBdMAugTpAKQF0wC6BOkApAXTALoE6QCkBdMAugTpAKQF0wC6BOkApAXTALoE6QCkB2gAGwY5ABcEewAABAgAAgR7AAAEkQBSA74AUgSRAFIDvgBSBJEAUgO+AFICjwCwBJ4AwwUUAAAEcwBeBvz//gbdAF4GOwB9BNUAcwRkAGoD0QBqBLwBDAS8AQwEsgEtBLwBJQIGAKIEngFvAZMAJQS8AQgEngDnBJ4B/ASeARsFEAAAAiEAmATy/9QGff/UA5j/5AaB/+QFhf/UBoH/5AK2/+kFEAAABS8AyQQpAMkEkwAnBHMAyQSRAFIF5wDJBjsAfQKqAFQE6QDJBNMAAAc5AMkGCADJBG0ASAY7AH0F1QDJBNEAyQSJAEoEbQASBHsAAAZiAGoEngAIBl4AbQZCAFACqgA8BHsAAATjAHMDzQBaBOkAsAK2AKgE3wCkBOMAcwUGALAEGQAKBKQAcQPNAFoD3QBzBOkAsAS8AHMCtgCoBCUAsARG//
Related
CSS - unwanted spacing between letters from SVG logo
I've been working on a website for a while and now I'm trying to make it responsive. When I open it from my phone, the letters from the logo are getting distanced.
Logo on PC:
Photo
Logo on Phone:
Photo
Does anyone know why is this happening? Thanks in advance.
Edit:
HTML:
<img src = "resources/blue-logo.svg" class = "logo">
CSS:
.logo{
max-width: 100%;
width: 16em;
padding: 15px 0px 15px 20px;
letter-spacing: normal;
}
The problem was in svg coordinates:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53"><defs><style>.cls-1{font-size:76.08px;font-family:Montserrat-Bold, Montserrat;font-weight:700;}.cls-1,.cls-8{fill:#231f20;}.cls-2{letter-spacing:0em;}.cls-3{letter-spacing:0em;}.cls-4{letter-spacing:0em;}.cls-5,.cls-6,.cls-7{fill:#00aeef;}.cls-5{letter-spacing:0em;}.cls-7{letter-spacing:-0.02em;}</style></defs><text class="cls-1" transform="translate(0 162.29)"><tspan class="cls-2">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="cls-3" x="158.93" y="0">e</tspan>
<tspan class="cls-4" x="190.01" y="0">’</tspan><tspan x="207.57" y="0">s </tspan><tspan class="cls-5" x="260.5" y="0">Cus</tspan>
<tspan class="cls-7" x="385.86" y="0">toms</tspan></text>
Your phone screenshot clearly indicates, that your font is not loaded/available.
You could actually add a stylesheet to your svg defs to load the google font Montserrat directly.
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
</style>
</defs>
But I strongly recommend embedding the font using
the vecta.io/nano svg optimizer
Nano optimizer will also subset your font, the embedded font just includes the actually used glyphs/characters – resulting in much smaller file sizes than embedding a complete glyphset (~9 KB):
Your svg would have this code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53" xmlns:v="https://vecta.io/nano"><defs><style>#font-face{font-family:"CustomFont";src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); font-weight:bold;font-style:normal;}</style></defs><style><![CDATA[.B{letter-spacing:0em}.C{letter-spacing:0em}.D{letter-spacing:0em}.E{letter-spacing:0em}.G{letter-spacing:-0.02em}]]></style><text transform="translate(0 162.29)" font-size="76.08" font-family="CustomFont" font-weight="700" fill="#231f20"><tspan class="B">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="C" x="178.93" y="0">e</tspan><tspan class="D" x="227.01" y="0">’</tspan><tspan x="245.57" y="0">s </tspan><tspan class="E" x="307.5" fill="#00aeef" y="0">C</tspan><tspan x="362.2" fill="#00aeef" y="0">us</tspan><tspan class="G" x="454.86" fill="#00aeef" y="0">t</tspan><tspan x="486.66" fill="#00aeef" y="0">oms</tspan></text><g fill="#231f20"><circle cx="627.19" cy="33.72" r="4.65"/><circle cx="622.54" cy="48.25" r="4.65"/><circle cx="607.42" cy="51.74" r="4.65"/><circle cx="618.47" cy="62.79" r="4.65"/><circle cx="596.96" cy="41.28" r="4.65"/><circle cx="611.49" cy="37.21" r="4.65"/><path d="M641.72 51.75a36.72 36.72 0 0 0 8.74 26.16L640 88.37l6.46 6.46 11.24-11.24 2.13-2.13-.07-.06 52.89-52.88.06.07 7-7-.06-.06 5.81-5.82-6.4-7-9.3 9.31c-13.763-11.218-33.373-11.699-47.67-1.17L645.23-.01l-12.77 12.8 16.86 16.86a37.57 37.57 0 0 0-7.6 22.1zm9.3.58a35.75 35.75 0 0 1 10.44-22.68c6.39-6.39 14.53-10.46 22.67-10.46a26.1 26.1 0 0 1 18.61 5.23l-45.93 45.93c-4.04-5.23-6.35-11.63-5.79-18.02z"/></g><path d="M800.03 101.2L720.1 21.27l-7 7 79.93 79.93zm-66.11 66.12h0l6.23-6.23-79.93-79.93-6.39 6.36 79.93 80z" fill="#00aeef"/><path d="M747.54 152.28l-7.2 7.2-1.18 1.18-.73.73-1.1 1.1-11.26 11.26 6.83 6.83 79.65-79.65-7.36-6.3z" fill="#231f20"/></svg>
However, when it comes to logos, I still recommend converting your text to paths in your graphic application (Adobe Ai, inscape, figma etc.).
It is still the most reliable technique.
Albeit svg <text> elements offer some benefits concerning accessibility – something like a <title> element or some aria-attributes added the svg would also to the trick.
Missing font on a SVG logo
I have an SVG logo that has been designed with the Nunito Sans font.
The font is showing correctly on the website only if the font is installed on the computer.
Please find below the code from the SVG image
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501.58 501.58"><defs><style>.cls-1{fill:#243d62;stroke:#1d1d1b;stroke-miterlimit:10;}.cls-2{font-size:99.93px;fill:#fff;font-family:Nunito Sans;font-weight:700;}.cls-3{letter-spacing:-1px;}</style></defs><title>Logo512x512</title><circle class="cls-1" cx="250.79" cy="250.79" r="250.29"/><text class="cls-2" transform="translate(25.25 279.94)"><tspan class="cls-3">P</tspan><tspan x="64.66" y="0">acAnGO</tspan></text></svg>
I tried to save the fonts on the website but it never worked.
As the Nunito Sans belong to Google, is there a way to assign it though a web link?
If not what will be the correct code to link the font to the SVG logo?
Thanks
There are two solutions for this: Before exporting in your logo in SVG make sure to convert your text to outlines. Normally you can do this in Sketch or Illustrator quite easily by pressing right mouse on the selected text. I converted it to curves with a program (Affinity Designer) and below is the result. This can be accomplished with any editor. If you the code you should see the logo as it is intended. <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2090 2090" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;"><circle cx="1044.96" cy="1044.96" r="1042.88" style="fill:#243d62;stroke:#1d1d1b;stroke-width:4.17px;"/><g><path d="M136.853,872.872l128.243,0c31.367,0 55.795,7.842 73.282,23.525c17.488,15.684 26.232,37.682 26.232,65.996c-0,28.313 -8.744,50.381 -26.232,66.204c-17.487,15.822 -41.915,23.733 -73.282,23.733l-74.531,-0l0,114.087l-53.712,-0l-0,-293.545Zm121.581,138.237c36.919,-0 55.378,-16.1 55.378,-48.3c0,-16.377 -4.58,-28.521 -13.74,-36.433c-9.16,-7.911 -23.04,-11.866 -41.638,-11.866l-67.869,-0l0,96.599l67.869,-0Z" style="fill:#fff;fill-rule:nonzero;"/><g><path d="M489.128,957.813c28.591,-0 49.826,6.939 63.705,20.819c13.88,13.879 20.819,35.253 20.819,64.121l0,123.664l-49.548,-0l-0,-31.228c-4.719,10.825 -12.145,19.292 -22.276,25.398c-10.132,6.107 -21.86,9.161 -35.184,9.161c-13.602,-0 -25.954,-2.776 -37.057,-8.328c-11.104,-5.551 -19.848,-13.185 -26.232,-22.9c-6.385,-9.716 -9.577,-20.542 -9.577,-32.478c0,-14.989 3.817,-26.786 11.451,-35.392c7.633,-8.605 20.055,-14.85 37.265,-18.736c17.21,-3.887 40.944,-5.83 71.2,-5.83l10.41,0l-0,-9.576c-0,-13.879 -2.984,-23.872 -8.952,-29.979c-5.968,-6.107 -15.892,-9.161 -29.771,-9.161c-10.826,0 -22.138,1.874 -33.935,5.621c-11.797,3.748 -23.386,8.953 -34.767,15.615l-14.573,-35.809c11.381,-7.217 25.121,-13.185 41.221,-17.904c16.1,-4.719 31.367,-7.078 45.801,-7.078Zm-12.075,174.461c13.879,-0 25.191,-4.65 33.935,-13.949c8.744,-9.299 13.116,-21.304 13.116,-36.016l-0,-8.744l-7.495,0c-18.598,0 -33.033,0.833 -43.303,2.498c-10.271,1.666 -17.627,4.58 -22.068,8.744c-4.441,4.164 -6.662,9.854 -6.662,17.072c0,8.882 3.053,16.169 9.16,21.859c6.107,5.691 13.879,8.536 23.317,8.536Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M719.384,1169.75c-21.374,-0 -39.903,-4.303 -55.587,-12.908c-15.683,-8.605 -27.688,-20.819 -36.016,-36.641c-8.327,-15.822 -12.491,-34.282 -12.491,-55.378c-0,-21.096 4.372,-39.764 13.116,-56.002c8.743,-16.239 21.165,-28.8 37.265,-37.682c16.1,-8.883 34.698,-13.324 55.794,-13.324c14.435,-0 28.522,2.29 42.262,6.87c13.741,4.58 24.775,10.756 33.102,18.529l-14.989,36.641c-8.605,-6.94 -17.696,-12.214 -27.273,-15.823c-9.576,-3.608 -19.084,-5.412 -28.521,-5.412c-18.043,-0 -32.061,5.621 -42.054,16.863c-9.993,11.242 -14.99,27.411 -14.99,48.507c0,20.819 4.997,36.85 14.99,48.092c9.993,11.242 24.011,16.863 42.053,16.863c9.438,-0 18.946,-1.804 28.522,-5.413c9.577,-3.609 18.668,-8.883 27.273,-15.822l14.989,36.224c-8.882,8.05 -20.263,14.365 -34.143,18.945c-13.879,4.581 -28.313,6.871 -43.303,6.871Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1058.73,1166.42l-29.562,-68.702l-142.817,-0l-29.563,68.702l-54.129,-0l132.824,-293.545l43.719,0l132.824,293.545l-53.296,-0Zm-154.891,-110.34l107.424,0l-53.712,-124.912l-53.712,124.912Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1256.92,957.813c24.427,-0 42.609,6.939 54.545,20.819c11.936,13.879 17.904,34.836 17.904,62.872l-0,124.913l-52.047,-0l0,-121.998c0,-15.822 -2.984,-27.342 -8.952,-34.559c-5.968,-7.217 -15.337,-10.826 -28.105,-10.826c-14.99,-0 -26.995,4.719 -36.017,14.157c-9.021,9.438 -13.532,22.068 -13.532,37.89l0,115.336l-52.047,-0l0,-203.608l50.798,0l-0,30.396c6.939,-11.381 16.239,-20.125 27.897,-26.232c11.659,-6.107 24.844,-9.16 39.556,-9.16Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1631.66,1007.78l0,140.735c-13.324,6.662 -29.493,11.936 -48.508,15.822c-19.014,3.886 -38.375,5.829 -58.084,5.829c-30.256,0 -56.488,-6.037 -78.695,-18.112c-22.206,-12.075 -39.208,-29.424 -51.006,-52.047c-11.797,-22.623 -17.696,-49.479 -17.696,-80.569c0,-30.811 5.899,-57.529 17.696,-80.152c11.798,-22.623 28.591,-39.972 50.382,-52.047c21.79,-12.075 47.397,-18.112 76.821,-18.112c20.541,-0 39.833,2.984 57.876,8.952c18.043,5.968 33.032,14.504 44.969,25.607l-17.905,38.723c-13.601,-10.548 -26.995,-18.112 -40.18,-22.693c-13.185,-4.58 -27.689,-6.87 -43.511,-6.87c-30.257,0 -53.088,8.952 -68.494,26.856c-15.406,17.905 -23.109,44.483 -23.109,79.736c0,72.172 31.645,108.258 94.934,108.258c18.876,-0 37.751,-2.637 56.627,-7.911l0,-73.699l-63.289,0l0,-38.306l111.172,-0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M1822.78,1170.16c-28.591,0 -53.365,-6.107 -74.323,-18.32c-20.957,-12.214 -37.126,-29.702 -48.507,-52.464c-11.381,-22.762 -17.072,-49.41 -17.072,-79.944c0,-30.534 5.621,-57.112 16.863,-79.736c11.243,-22.623 27.412,-40.041 48.508,-52.255c21.096,-12.213 45.94,-18.32 74.531,-18.32c28.591,-0 53.366,6.107 74.323,18.32c20.958,12.214 37.058,29.632 48.3,52.255c11.242,22.624 16.863,49.202 16.863,79.736c-0,30.534 -5.691,57.182 -17.072,79.944c-11.38,22.762 -27.55,40.25 -48.507,52.464c-20.958,12.213 -45.593,18.32 -73.907,18.32Zm0,-42.887c26.926,0 47.953,-9.299 63.081,-27.897c15.128,-18.598 22.692,-45.246 22.692,-79.944c0,-34.698 -7.564,-61.276 -22.692,-79.736c-15.128,-18.459 -36.155,-27.688 -63.081,-27.688c-27.203,-0 -48.369,9.229 -63.497,27.688c-15.128,18.46 -22.692,45.038 -22.692,79.736c-0,34.698 7.564,61.346 22.692,79.944c15.128,18.598 36.294,27.897 63.497,27.897Z" style="fill:#fff;fill-rule:nonzero;"/></g></g></svg> Include nunito sans through google fonts in your tag in your document. You can select styles here. Then for embed, choose link (for html) or #import (if you want to include through CSS) and copy paste that link to your html or css file. You'll need the html provided by google.
convert svg to svg base64 and embed it in HTML document
Given some svg code here: <?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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16"> <path d="M15.025,15.2017972 L10.8665842,11.0433814 C12.9070491,8.61548644 12.8037344,4.99947266 10.5308115,2.72654972 C8.12874516,0.324483427 4.22861601,0.324483427 1.82654972,2.72654972 C-0.575516573,5.12861601 -0.575516573,9.02874516 1.82654972,11.4308115 C3.01466853,12.6189303 4.61604606,13.2388183 6.19159492,13.2388183 C7.61217176,13.2388183 9.00691993,12.7480736 10.1692101,11.7924128 L14.3276259,15.9508287 L15.025,15.2017972 Z M2.54975248,10.7076087 C0.560944899,8.71880112 0.560944899,5.46438872 2.54975248,3.47558115 C3.5570706,2.46826302 4.84850409,1.9775183 6.16576625,1.9775183 C7.48302841,1.9775183 8.80029057,2.46826302 9.78178003,3.47558115 C11.7705876,5.46438872 11.7705876,8.71880112 9.78178003,10.7076087 C7.79297245,12.6964163 4.53856005,12.6964163 2.54975248,10.7076087 Z"/> </svg> How can I encode this in base 64 and use it in my html document?
If you don't have one already, create a .svg file by copying your svg code in a file that you save as myFile.svg. Make sure that the 3 first lines (xml, DOCTYPE and svg are there with their attributes, or this will break - viewbox's size can be modified) Drag and drop your file in http://jpillora.com/base64-encoder/ Copy the code starting with data:image/svg+xml;base64 and paste it the src attribute of an img tag in your html code: <img id="myId" width="16px" height="16px" alt="search button" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KPHBhdGggZD0iTTE1LjAyNSwxNS4yMDE3OTcyIEwxMC44NjY1ODQyLDExLjA0MzM4MTQgQzEyLjkwNzA0OTEsOC42MTU0ODY0NCAxMi44MDM3MzQ0LDQuOTk5NDcyNjYgMTAuNTMwODExNSwyLjcyNjU0OTcyIEM4LjEyODc0NTE2LDAuMzI0NDgzNDI3IDQuMjI4NjE2MDEsMC4zMjQ0ODM0MjcgMS44MjY1NDk3MiwyLjcyNjU0OTcyIEMtMC41NzU1MTY1NzMsNS4xMjg2MTYwMSAtMC41NzU1MTY1NzMsOS4wMjg3NDUxNiAxLjgyNjU0OTcyLDExLjQzMDgxMTUgQzMuMDE0NjY4NTMsMTIuNjE4OTMwMyA0LjYxNjA0NjA2LDEzLjIzODgxODMgNi4xOTE1OTQ5MiwxMy4yMzg4MTgzIEM3LjYxMjE3MTc2LDEzLjIzODgxODMgOS4wMDY5MTk5MywxMi43NDgwNzM2IDEwLjE2OTIxMDEsMTEuNzkyNDEyOCBMMTQuMzI3NjI1OSwxNS45NTA4Mjg3IEwxNS4wMjUsMTUuMjAxNzk3MiBaIE0yLjU0OTc1MjQ4LDEwLjcwNzYwODcgQzAuNTYwOTQ0ODk5LDguNzE4ODAxMTIgMC41NjA5NDQ4OTksNS40NjQzODg3MiAyLjU0OTc1MjQ4LDMuNDc1NTgxMTUgQzMuNTU3MDcwNiwyLjQ2ODI2MzAyIDQuODQ4NTA0MDksMS45Nzc1MTgzIDYuMTY1NzY2MjUsMS45Nzc1MTgzIEM3LjQ4MzAyODQxLDEuOTc3NTE4MyA4LjgwMDI5MDU3LDIuNDY4MjYzMDIgOS43ODE3ODAwMywzLjQ3NTU4MTE1IEMxMS43NzA1ODc2LDUuNDY0Mzg4NzIgMTEuNzcwNTg3Niw4LjcxODgwMTEyIDkuNzgxNzgwMDMsMTAuNzA3NjA4NyBDNy43OTI5NzI0NSwxMi42OTY0MTYzIDQuNTM4NTYwMDUsMTIuNjk2NDE2MyAyLjU0OTc1MjQ4LDEwLjcwNzYwODcgWiIvPg0KPC9zdmc+DQo=" />
Have SVG map of Massachusetts counties, want to make each county clickable with link to outside page
I have an SVG map of the state of Massachusetts with counties outlined (source can be found here: http://libremap.org/data/boundary/2000/county/svg/co25_d00.svg). I have altered the code to include xlink:href definition in the svg tag. I used the SVG in a basic HTML file, as seen below: <html> <head> <title>SVG Test</title> </head> <body> <img src="co25_d00.svg" /> </body> </html> The image loads fine, and I can change the fill of each county as I like. The problem is that I placed an a xlink:href around a specific path, and it doesn't work as a link. Below is a sample of the SVG code: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.0" width="100%" height="100%" preserveAspectRatio="xMidYMax" viewBox="12.711167 456.567074 29.566845 18.433033"> <title>Libre Map Project</title> <g transform="scale(1.0,-1.0) translate(0,-931.567181)"> <g id="Unknown_Area_Type_co25_d00_e00" style="fill:none;stroke:rgb(1,0,0);stroke-width:0.01;stroke-linecap:round"> ... <a xlink:href="https://en.wikipedia.org/wiki/Barnstable_County,_Massachusetts"><path id="Barnstable" d="M37.230740 462.99185L37.268016 462.92386 37.375500 462.78861 37.391948 462.76791 37.559158 462.59886 37.582781 462.57499 37.603301 462.55942 37.664784 462.51279 37.673197 462.50641 37.729754 462.46353 37.747012 462.45044 37.767412 462.43498 37.966563 462.35378 38.126619 462.28857 38.255376 462.23615 38.499528 462.18269 38.523103 462.17754 38.563161 462.16877 38.621224 462.16374 39.024716 462.12888 39.264138 462.10831 39.286741 462.09215 39.385481 462.02160 39.391843 462.01706 39.393810 462.01566 39.395480 462.01184 39.401072 461.99905 39.403738 461.99295 39.417259 461.96204 39.487907 461.88070 39.505240 461.87960 39.508894 461.87937 39.524892 461.87837 39.541570 461.89592 39.590233 461.94715 39.626765 461.98561 39.664871 462.02574 39.717661 462.08135 39.728769 462.09305 39.730651 462.09503 39.819832 462.15186 39.843028 462.16665 39.888260 462.19548 40.112647 462.29230 40.114578 462.29188 40.114924 462.29181 40.172158 462.27930 40.181864 462.28209 40.183292 462.28250 40.224336 462.29431 40.362480 462.33408 40.510593 462.37675 40.614984 462.36658 40.662071 462.36200 40.672975 462.36094 40.731035 462.38313 40.733204 462.38396 40.785031 462.40378 40.839923 462.42477 40.870396 462.43643 40.889517 462.44374 40.967976 462.46347 41.009909 462.47401 41.126383 462.50331 41.137370 462.50608 41.143929 462.50773 41.154268 462.51033 41.187071 462.52591 41.292085 462.57578 41.328169 462.59293 41.414383 462.63390 41.419586 462.63637 41.485150 462.66754 41.496469 462.67972 41.506157 462.69014 41.607866 462.79962 41.617398 462.80988 41.618228 462.81078 41.622110 462.81496 41.660285 462.89775 41.661494 462.90038 41.661175 462.97599 41.660079 463.23692 41.648701 463.38323 41.638199 463.51834 41.627424 463.65703 41.658143 463.70385 41.701988 463.77068 41.679743 463.80844 41.603329 463.82423 41.503226 463.90497 41.500326 463.95440 41.494832 464.04808 41.459389 464.22463 41.455827 464.24238 41.336076 464.25377 41.257202 464.22494 41.162114 464.05168 41.160025 463.91826 41.160449 463.87381 41.161291 463.78568 41.162725 463.77090 41.170764 463.68808 41.154588 463.66703 41.141720 463.67588 41.114865 463.73373 41.099359 463.92060 41.096743 464.35224 41.087791 464.56613 41.074973 464.87274 41.063677 464.94094 41.030280 465.14268 41.026069 465.16812 40.979835 465.31146 40.931150 465.40021 40.829518 465.52111 40.706690 465.61230 40.507976 465.72432 40.499265 465.72924 40.440416 465.73513 40.321148 465.70706 40.263076 465.67832 40.248763 465.67123 40.192204 465.61844 40.178766 465.60590 40.147844 465.54825 40.113840 465.48487 40.107646 465.44033 40.105658 465.42604 40.123437 465.35265 40.178593 465.28227 40.174957 465.26673 40.140814 465.26858 40.092678 465.29592 40.000236 465.38940 39.914177 465.55851 39.795619 465.69199 39.749570 465.72336 39.710985 465.72492 39.696231 465.76028 39.758083 465.86094 39.862078 465.92300 40.017500 465.95742 40.163093 465.96024 40.403550 465.91574 40.451802 465.89891 40.767552 465.78885 41.041587 465.64117 41.238988 465.47997 41.283325 465.42483 41.436045 465.23499 41.443119 465.22620 41.448436 465.21669 41.539002 465.05474 41.618306 464.91300 41.737306 464.65747 41.826993 464.46502 41.846264 464.40692 41.967179 464.04260 42.055474 463.68904 42.112508 463.46086 42.152151 463.30235 42.224626 462.90901 42.225544 462.90403 42.254156 462.49063 42.255592 462.46990 42.278008 462.14648 42.277262 461.99368 42.276992 461.93830 42.275328 461.59632 42.246321 461.43415 42.232334 461.35599 42.153595 461.18265 42.126727 461.12353 42.108747 461.08396 42.092088 461.05609 42.080885 461.03734 42.078456 461.03327 42.069716 461.03113 42.034061 461.02238 42.019131 461.01872 41.977108 460.95661 41.937715 460.88720 41.863011 460.62335 41.807826 460.38133 41.761107 460.09397 41.759877 460.08641 41.758979 460.08089 41.756989 460.07799 41.675367 459.95911 41.624583 459.94271 41.563231 459.95235 41.538949 459.98162 41.521884 460.03998 41.533689 460.06266 41.534898 460.06498 41.536689 460.06477 41.554630 460.06269 41.571673 460.06072 41.648873 460.16265 41.710592 460.32730 41.736248 460.46876 41.774158 460.67787 41.774350 460.67893 41.807197 460.77556 41.810965 460.78664 41.832755 460.85076 41.841612 460.87683 41.860972 460.93381 41.895303 461.03488 41.896380 461.03805 41.896134 461.10375 41.875621 461.17921 41.833157 461.21695 41.829289 461.22039 41.705485 461.33046 41.673236 461.34870 41.617378 461.38029 41.570248 461.38426 41.566380 461.38459 41.557494 461.38534 41.430945 461.33991 41.363606 461.33078 41.360911 461.33041 41.212630 461.31033 41.133231 461.30494 40.954581 461.29284 40.931660 461.29129 40.692202 461.21804 40.659560 461.20806 40.584445 461.18511 40.499917 461.15929 40.429241 461.16031 40.355074 461.16139 40.352163 461.16143 40.081236 461.10761 40.080954 461.10750 40.055456 461.09750 40.054438 461.09710 39.837307 461.01201 39.709151 460.96182 39.622129 460.92776 39.534713 460.84262 39.540785 460.80748 39.504869 460.73384 39.456101 460.71756 39.438335 460.73536 39.421959 460.81181 39.427901 460.90020 39.415122 460.92370 39.384163 460.98063 39.327902 461.00588 39.250452 461.00782 39.128208 460.98506 38.991718 460.95968 38.988393 460.96191 38.986389 460.96326 38.922978 461.00593 38.898825 461.01330 38.889072 461.01627 38.855456 461.02652 38.742169 461.00995 38.668921 460.97093 38.630340 460.92325 38.630937 460.89421 38.631037 460.88937 38.587094 460.80363 38.508831 460.75461 38.329374 460.70220 38.324663 460.70304 38.323971 460.70317 38.281913 460.71065 38.263268 460.71397 38.240457 460.71222 38.231006 460.71149 38.061163 460.69842 38.023653 460.69554 37.954117 460.54662 37.932408 460.51179 37.907014 460.47106 37.841406 460.36585 37.831832 460.35050 37.817093 460.32687 37.805205 460.31327 37.798903 460.30606 37.742189 460.24118 37.736757 460.23496 37.689687 460.18113 37.615246 460.13756 37.611195 460.13519 37.607828 460.13397 37.546783 460.11187 37.491132 460.10500 37.303630 460.08192 37.258022 460.08169 37.225862 460.08153 37.096172 460.08091 36.991890 460.08043 36.985980 460.07972 36.902912 460.06975 36.869961 460.06581 36.812554 460.05893 36.748724 460.05129 36.746101 460.05098 36.705570 460.04613 36.683542 460.04350 36.598991 460.03339 36.562151 460.02900 36.528379 460.02022 36.519722 460.01797 36.500602 460.01301 36.465170 460.00381 36.373264 459.97995 36.300327 459.92502 36.294511 459.92064 36.288433 459.91607 36.276589 459.89685 36.261510 459.87240 36.200456 459.77338 36.198195 459.76972 36.157548 459.74315 36.115754 459.71583 36.068355 459.70906 36.068355 459.70906 36.046056 459.73654 36.026864 459.77702 35.970136 459.75774 35.911927 459.75042 35.887030 459.76260 35.861232 459.84883 35.860061 459.84974 35.860061 459.84974 35.928998 459.89288 35.969121 459.91800 36.094434 459.99646 36.108047 460.00499 36.141812 460.02614 36.148183 460.03013 36.163243 460.03957 36.165379 460.04090 36.179187 460.06722 36.203113 460.11283 36.195859 460.19707 36.209713 460.28190 36.253396 460.33338 36.304221 460.36034 36.309991 460.37996 36.317944 460.40699 36.320271 460.41490 36.312380 460.47882 36.310798 460.48359 36.310226 460.48531 36.274985 460.59158 36.259328 460.63881 36.230318 460.72633 36.231908 460.74416 36.235234 460.78148 36.282818 460.85469 36.322052 460.91506 36.332852 460.93169 36.338130 460.93981 36.301594 461.02715 36.296303 461.03980 36.291073 461.04402 36.235884 461.08852 36.252979 461.14981 36.255520 461.15892 36.297071 461.18255 36.343326 461.20885 36.354262 461.21507 36.364202 461.27204 36.353661 461.31381 36.353579 461.31414 36.312254 461.47792 36.297018 461.53833 36.272770 461.56667 36.171485 461.57765 36.303156 461.70882 36.474961 461.75995 36.479421 461.78569 36.482194 461.80170 36.491661 461.85634 36.468905 461.91893 36.436396 461.93401 36.333448 461.98178 36.333448 461.98178 36.356782 462.03895 36.365084 462.08776 36.365084 462.08776 36.365785 462.09920 36.365785 462.09920 36.422913 462.14930 36.417572 462.16948 36.422730 462.19486 36.422730 462.19486 36.480110 462.27385 36.492775 462.27851 36.492775 462.27851 36.516764 462.28866 36.520350 462.29491 36.523909 462.30147 36.522167 462.31009 36.483238 462.38742 36.483238 462.38742 36.463404 462.42486 36.463404 462.42486 36.453382 462.44371 36.453382 462.44371 36.429461 462.47330 36.429461 462.47330 36.669431 462.59560 36.859916 462.67466 36.961174 462.71628 36.993330 462.72788 37.033600 462.77391 37.146083 462.89660 37.159201 462.91208 37.230740 462.99185Z"/></a> ... </g> </g> </svg> I've seen code snippets on codepen, jsfiddle, and various other blogs that seem to work using this type of setup, I'm not sure why it's not working me. Any pointers are greatly appreciated!
The reason it doesn't work is because if the fill is none, the click wont register. Try it with a fill of transparent. <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.0" width="100%" height="100%" preserveAspectRatio="xMidYMax" viewBox="12.711167 456.567074 29.566845 18.433033"> <title>Libre Map Project</title> <g transform="scale(1.0,-1.0) translate(0,-931.567181)"> <g id="Unknown_Area_Type_co25_d00_e00" style="fill:transparent;stroke:rgb(1,0,0);stroke-width:0.01;stroke-linecap:round"> ... <a xlink:href="https://en.wikipedia.org/wiki/Barnstable_County,_Massachusetts"><path id="Barnstable" d="M37.230740 462.99185L37.268016 462.92386 37.375500 462.78861 37.391948 462.76791 37.559158 462.59886 37.582781 462.57499 37.603301 462.55942 37.664784 462.51279 37.673197 462.50641 37.729754 462.46353 37.747012 462.45044 37.767412 462.43498 37.966563 462.35378 38.126619 462.28857 38.255376 462.23615 38.499528 462.18269 38.523103 462.17754 38.563161 462.16877 38.621224 462.16374 39.024716 462.12888 39.264138 462.10831 39.286741 462.09215 39.385481 462.02160 39.391843 462.01706 39.393810 462.01566 39.395480 462.01184 39.401072 461.99905 39.403738 461.99295 39.417259 461.96204 39.487907 461.88070 39.505240 461.87960 39.508894 461.87937 39.524892 461.87837 39.541570 461.89592 39.590233 461.94715 39.626765 461.98561 39.664871 462.02574 39.717661 462.08135 39.728769 462.09305 39.730651 462.09503 39.819832 462.15186 39.843028 462.16665 39.888260 462.19548 40.112647 462.29230 40.114578 462.29188 40.114924 462.29181 40.172158 462.27930 40.181864 462.28209 40.183292 462.28250 40.224336 462.29431 40.362480 462.33408 40.510593 462.37675 40.614984 462.36658 40.662071 462.36200 40.672975 462.36094 40.731035 462.38313 40.733204 462.38396 40.785031 462.40378 40.839923 462.42477 40.870396 462.43643 40.889517 462.44374 40.967976 462.46347 41.009909 462.47401 41.126383 462.50331 41.137370 462.50608 41.143929 462.50773 41.154268 462.51033 41.187071 462.52591 41.292085 462.57578 41.328169 462.59293 41.414383 462.63390 41.419586 462.63637 41.485150 462.66754 41.496469 462.67972 41.506157 462.69014 41.607866 462.79962 41.617398 462.80988 41.618228 462.81078 41.622110 462.81496 41.660285 462.89775 41.661494 462.90038 41.661175 462.97599 41.660079 463.23692 41.648701 463.38323 41.638199 463.51834 41.627424 463.65703 41.658143 463.70385 41.701988 463.77068 41.679743 463.80844 41.603329 463.82423 41.503226 463.90497 41.500326 463.95440 41.494832 464.04808 41.459389 464.22463 41.455827 464.24238 41.336076 464.25377 41.257202 464.22494 41.162114 464.05168 41.160025 463.91826 41.160449 463.87381 41.161291 463.78568 41.162725 463.77090 41.170764 463.68808 41.154588 463.66703 41.141720 463.67588 41.114865 463.73373 41.099359 463.92060 41.096743 464.35224 41.087791 464.56613 41.074973 464.87274 41.063677 464.94094 41.030280 465.14268 41.026069 465.16812 40.979835 465.31146 40.931150 465.40021 40.829518 465.52111 40.706690 465.61230 40.507976 465.72432 40.499265 465.72924 40.440416 465.73513 40.321148 465.70706 40.263076 465.67832 40.248763 465.67123 40.192204 465.61844 40.178766 465.60590 40.147844 465.54825 40.113840 465.48487 40.107646 465.44033 40.105658 465.42604 40.123437 465.35265 40.178593 465.28227 40.174957 465.26673 40.140814 465.26858 40.092678 465.29592 40.000236 465.38940 39.914177 465.55851 39.795619 465.69199 39.749570 465.72336 39.710985 465.72492 39.696231 465.76028 39.758083 465.86094 39.862078 465.92300 40.017500 465.95742 40.163093 465.96024 40.403550 465.91574 40.451802 465.89891 40.767552 465.78885 41.041587 465.64117 41.238988 465.47997 41.283325 465.42483 41.436045 465.23499 41.443119 465.22620 41.448436 465.21669 41.539002 465.05474 41.618306 464.91300 41.737306 464.65747 41.826993 464.46502 41.846264 464.40692 41.967179 464.04260 42.055474 463.68904 42.112508 463.46086 42.152151 463.30235 42.224626 462.90901 42.225544 462.90403 42.254156 462.49063 42.255592 462.46990 42.278008 462.14648 42.277262 461.99368 42.276992 461.93830 42.275328 461.59632 42.246321 461.43415 42.232334 461.35599 42.153595 461.18265 42.126727 461.12353 42.108747 461.08396 42.092088 461.05609 42.080885 461.03734 42.078456 461.03327 42.069716 461.03113 42.034061 461.02238 42.019131 461.01872 41.977108 460.95661 41.937715 460.88720 41.863011 460.62335 41.807826 460.38133 41.761107 460.09397 41.759877 460.08641 41.758979 460.08089 41.756989 460.07799 41.675367 459.95911 41.624583 459.94271 41.563231 459.95235 41.538949 459.98162 41.521884 460.03998 41.533689 460.06266 41.534898 460.06498 41.536689 460.06477 41.554630 460.06269 41.571673 460.06072 41.648873 460.16265 41.710592 460.32730 41.736248 460.46876 41.774158 460.67787 41.774350 460.67893 41.807197 460.77556 41.810965 460.78664 41.832755 460.85076 41.841612 460.87683 41.860972 460.93381 41.895303 461.03488 41.896380 461.03805 41.896134 461.10375 41.875621 461.17921 41.833157 461.21695 41.829289 461.22039 41.705485 461.33046 41.673236 461.34870 41.617378 461.38029 41.570248 461.38426 41.566380 461.38459 41.557494 461.38534 41.430945 461.33991 41.363606 461.33078 41.360911 461.33041 41.212630 461.31033 41.133231 461.30494 40.954581 461.29284 40.931660 461.29129 40.692202 461.21804 40.659560 461.20806 40.584445 461.18511 40.499917 461.15929 40.429241 461.16031 40.355074 461.16139 40.352163 461.16143 40.081236 461.10761 40.080954 461.10750 40.055456 461.09750 40.054438 461.09710 39.837307 461.01201 39.709151 460.96182 39.622129 460.92776 39.534713 460.84262 39.540785 460.80748 39.504869 460.73384 39.456101 460.71756 39.438335 460.73536 39.421959 460.81181 39.427901 460.90020 39.415122 460.92370 39.384163 460.98063 39.327902 461.00588 39.250452 461.00782 39.128208 460.98506 38.991718 460.95968 38.988393 460.96191 38.986389 460.96326 38.922978 461.00593 38.898825 461.01330 38.889072 461.01627 38.855456 461.02652 38.742169 461.00995 38.668921 460.97093 38.630340 460.92325 38.630937 460.89421 38.631037 460.88937 38.587094 460.80363 38.508831 460.75461 38.329374 460.70220 38.324663 460.70304 38.323971 460.70317 38.281913 460.71065 38.263268 460.71397 38.240457 460.71222 38.231006 460.71149 38.061163 460.69842 38.023653 460.69554 37.954117 460.54662 37.932408 460.51179 37.907014 460.47106 37.841406 460.36585 37.831832 460.35050 37.817093 460.32687 37.805205 460.31327 37.798903 460.30606 37.742189 460.24118 37.736757 460.23496 37.689687 460.18113 37.615246 460.13756 37.611195 460.13519 37.607828 460.13397 37.546783 460.11187 37.491132 460.10500 37.303630 460.08192 37.258022 460.08169 37.225862 460.08153 37.096172 460.08091 36.991890 460.08043 36.985980 460.07972 36.902912 460.06975 36.869961 460.06581 36.812554 460.05893 36.748724 460.05129 36.746101 460.05098 36.705570 460.04613 36.683542 460.04350 36.598991 460.03339 36.562151 460.02900 36.528379 460.02022 36.519722 460.01797 36.500602 460.01301 36.465170 460.00381 36.373264 459.97995 36.300327 459.92502 36.294511 459.92064 36.288433 459.91607 36.276589 459.89685 36.261510 459.87240 36.200456 459.77338 36.198195 459.76972 36.157548 459.74315 36.115754 459.71583 36.068355 459.70906 36.068355 459.70906 36.046056 459.73654 36.026864 459.77702 35.970136 459.75774 35.911927 459.75042 35.887030 459.76260 35.861232 459.84883 35.860061 459.84974 35.860061 459.84974 35.928998 459.89288 35.969121 459.91800 36.094434 459.99646 36.108047 460.00499 36.141812 460.02614 36.148183 460.03013 36.163243 460.03957 36.165379 460.04090 36.179187 460.06722 36.203113 460.11283 36.195859 460.19707 36.209713 460.28190 36.253396 460.33338 36.304221 460.36034 36.309991 460.37996 36.317944 460.40699 36.320271 460.41490 36.312380 460.47882 36.310798 460.48359 36.310226 460.48531 36.274985 460.59158 36.259328 460.63881 36.230318 460.72633 36.231908 460.74416 36.235234 460.78148 36.282818 460.85469 36.322052 460.91506 36.332852 460.93169 36.338130 460.93981 36.301594 461.02715 36.296303 461.03980 36.291073 461.04402 36.235884 461.08852 36.252979 461.14981 36.255520 461.15892 36.297071 461.18255 36.343326 461.20885 36.354262 461.21507 36.364202 461.27204 36.353661 461.31381 36.353579 461.31414 36.312254 461.47792 36.297018 461.53833 36.272770 461.56667 36.171485 461.57765 36.303156 461.70882 36.474961 461.75995 36.479421 461.78569 36.482194 461.80170 36.491661 461.85634 36.468905 461.91893 36.436396 461.93401 36.333448 461.98178 36.333448 461.98178 36.356782 462.03895 36.365084 462.08776 36.365084 462.08776 36.365785 462.09920 36.365785 462.09920 36.422913 462.14930 36.417572 462.16948 36.422730 462.19486 36.422730 462.19486 36.480110 462.27385 36.492775 462.27851 36.492775 462.27851 36.516764 462.28866 36.520350 462.29491 36.523909 462.30147 36.522167 462.31009 36.483238 462.38742 36.483238 462.38742 36.463404 462.42486 36.463404 462.42486 36.453382 462.44371 36.453382 462.44371 36.429461 462.47330 36.429461 462.47330 36.669431 462.59560 36.859916 462.67466 36.961174 462.71628 36.993330 462.72788 37.033600 462.77391 37.146083 462.89660 37.159201 462.91208 37.230740 462.99185Z"/></a> ... </g> </g> </svg>
SVG sprite not work in Safari
Safari is not better than IE for a web developer. Here is the issue I saw in Safari. I am trying to use an SVG sprite to load product icon in my web page. HTML code: <img src="https://www.abc123.com/icon_sprite.svg#amex"> SVG Sprite Code: <?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 width="276" height="224" viewBox="0 0 276 224" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <view id="affiliate-programs" viewBox="148 0 32 32"/> <svg width="32" height="32" viewBox="0 0 32 32" x="148"><path .../></svg> <view id="alipay" viewBox="0 64 49 32"/> <svg width="49" height="32" viewBox="0 0 49 32" y="64"><path .../></svg> <view id="amex" viewBox="50 0 49 32"/> <svg width="49" height="32" viewBox="0 0 49 32" x="50"><path .../></svg> <view id="auction" viewBox="148 64 32 32"/> <svg width="32" height="32" viewBox="0 0 32 32" x="148" y="64"><path .../></svg> <view id="backorder-domain-service" viewBox="180 128 32 32"/> <svg width="32" height="32" viewBox="0 0 32 32" x="180" y="128"><path .../></svg> ... ... </svg> The <img> in HTML locate the <svg> by appending "#" + id of <view> in the sprite url. This way works in Chrome, Firefox, and even IE, but not in Safari. How it looks like in Chrome: And how it looks like in Safari 5 and Safari 9: So it basically means the appended #viewId in <img> can't recognize the view by ID, which is unacceptable. I am wondering if anyone has seen similar cases and could help me out. By the way, I also tried another solution. <object data="https://www.abc123.com/icon_sprite.svg#amex" type="image/svg+xml"></object> This solution display the correct svg of the sprite, however it will first disappear and then re-appear during AJAX calls, which is not good user experience either.
I answered most of my own questions here by myself. I don't know it is a happy thing or upsetting thing.
I figured out how to fix this issue in the next day after I posted it here.
According to https://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/, Safari only supports the fragment identifier like xxx.svg#<viewboxId> in Version 7, but not other versions, which I've confirmed in Sauce Labs. It is an even worse browser than IE.
Well, no more complaint. Let's talk about the solution, which is the most important thing.
It is true the fragment identifier xxx.svg#<viewboxId> does not work in most of Safaris. It happens in <img>, but not in <embed>. So for Safari, we can use <embed> to load fragment identifier.
How to differentiate browser:
function isSafari() {
if (navigator && navigator.userAgent) {
var userAgent = navigator.userAgent;
var isChrome = userAgent.indexOf('Chrome') > -1;
var isSafari = userAgent.indexOf('Safari') > -1;
if ((isChrome) && (isSafari)) {
isSafari = false;
}
return isSafari;
}
return false;
}
In Safari:
<embed id="embedSvg" class="pi_svg" src="https://www.abc123.com/icon_sprite.svg#amex" type="image/svg+xml"></embed>
In non-Safari:
<img class="pi_svg" src="https://www.abc123.com/icon_sprite.svg#amex">