SVG image not loading in any browser - html

I know this question has been asked a lot of times. I tried every possible solution but nothing seems to work. It is working on my friend's computers. I am uploading screenshots of icons.svg file and index.html file.
index.html
<div class="likes__field">
<svg class="likes__icon" width="100" height="100">
<use href="img/icons.svg#icon-heart">
</use>
</svg>
</div>
icons.svg
<svg aria-hidden="true"
style="position: absolute; width: 0; height: 0; overflow: hidden;"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
icon-heart inside icons.svg
<symbol id="icon-heart" viewBox="0 0 20 20">
<title>heart</title>
<path d="M17.19 4.155c-1.672-1.534-4.383-1.534-6.055 0l-1.135 1.042-1.136-1.042c-1.672-1.534-4.382-1.534-6.054 0-1.881 1.727-1.881 4.52 0 6.246l7.19 6.599 7.19-6.599c1.88-1.726 1.88-4.52 0-6.246z"></path>
</symbol>
I just checked in network tab. It blocked icons.svg due to some reason.

Related

How can I see the icons inside the SVG file?

I want to see all the icons inside the SVG file. I have tried to insert it into the HTML file with an img tag but I see a blank page.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-triangle-left" viewBox="0 0 20 20">
<title>triangle-left</title>
<path d="M14 5v10l-9-5 9-5z"></path>
</symbol>
<symbol id="icon-triangle-right" viewBox="0 0 20 20">
<title>triangle-right</title>
<path d="M15 10l-9 5v-10l9 5z"></path>
</symbol>
<symbol id="icon-check" viewBox="0 0 20 20">
<title>check</title>
<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
</symbol>
</defs>
</svg>

The code you provided contains only <symbols>. This is used to house SVG definitions that can be reused in different parts of the document. You would use them like this:
<svg>
<use xlink:href="#icon-triangle-left" />
</svg>
Live test: https://codepen.io/guilhermemuller/pen/NWqddGp

How to make .svg transparent area NOT clickable

I'm trying to set an .svg image as a button. Only problem is that i'm able to click not only in the painted are, but the transparency aswell. This i need to disable so i can only click on the painted are.
Below i provide the html code i've got so far (basically what i copied from the actual file. To clarify, i exported this image from Adobe Illustrator on a windows machine.
I haven't made any modifications through .css yet.
<div id="brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106"><defs><style>.cls-1{fill:#ff7800;}</style></defs><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></svg></div>

You can move the <a href="index.html"> into your SVG code, so that only the <path> elements are linked instead of the whole image:
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
<defs><style>.cls-1{fill:#ff7800;}</style></defs>
<a href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
The ability to just use <a href> as-is inside an SVG image was a relatively recent introduction. If you need to support older browsers, you may need to include the xlink namespace:
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106">
<defs><style>.cls-1{fill:#ff7800;}</style></defs>
<a xlink:href="index.html">
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</a>
</svg>
</div>
Edit I just tested this, it seems the most recent version of Safari on both iOS and OS X does not support the basic href version, they only support the xlink:href variant. With just href Safari on iOS will make the whole image clickable (which is what you're trying to avoid), on OS X the image will not be clickable at all.

Since your image is a circle you can apply border-radius: 50% and overflow: hidden to the a element in this specific scenario.
a {
border-radius: 50%;
display: block;
overflow: hidden;
}
a svg {
display: block;
}
<a href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106">
<defs>
<style>.cls-1 {fill: #FF7800;}</style>
</defs>
<path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/>
<path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/>
</svg>
</a>

Reuse SVG images while maintaining css control

I have some silhouette type images and they need to be able to change color, sometimes just to display in different locations, sometimes for hover effects.
This is easy enough to do with the SVG directly embedded into the HTML. Copy-paste and CSS to your heart's desire.
But then I have to copy-paste or programatically insert everywhere I want it. Some of these are used dozens of times. It just seems poor practice to re-transmit the same SVG markup repeatedly.
Is there a best-of-both-worlds solution, where I can CSS the paths and also somehow reuse the SVG on the front-end?

There is a tag in svg that let's you reuse "symbols". I think that is as close as you'll get.
You create a symbol by wrapping your paths etc in a symbol-element. Give it an id (so you can re-use it later):
<svg style="display: none;">
<symbol id="ic">
<paths and polygons and other fun stuff>
</symbol>
</svg>
Now you can reuse this symbol with <use> and xlink:href pointing to the symbol you made. And you can add classes freely to change things up:
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#ic" class="ic-blue" x="0" y="0" />
</svg>
Examples and code shamelessly plucked from https://tympanus.net/codrops Go read their content and click their ads! If there ever was a site deserving an exception in your ad-blocker, this is it.
https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
body {
padding: 2em;
}
svg {
width: 100px;
height: 125px;
border: 1px solid #ddd;
}
use.ic-1 {
fill: skyblue;
}
use.ic-2 {
fill: #FDC646;
}
use.ic-3 {
fill: #FF2D49;
}
svg path {
fill: inherit;
}
<svg style="display: none;">
<symbol id="ic">
<path fill="#000000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844 c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442 c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933 c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04 c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929 C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907 c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48 c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631 c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z M50.01,86.723L27.73,49.13h44.541L50.01,86.723z"/>
</symbol>
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="ic-1" xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="ic-2" xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="ic-3" xlink:href="#ic" x="0" y="0" />
</svg>

Changing <svg> and <path> elements background color

I'm currently uninstalling a page builder on my website, but I want to keep some of its styles.
I copied the html of an element, it used to have a red color on the stripes which are now black/grey, but I got problems changing the color of them.
Only color I can change is the background.
<svg xmlns="http://www.w3.org/2000/svg" style="max-height:100px;
margin-bottom: 30px;" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path style="width: 2500px;" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
<path style="width: 2500px;" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
<path style="width: 2500px;" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>
Thanks for any help in advance!

You probabily want to include the css files from your page builder to add the style to your HTML page.
But for now, if you want your <svg> to be red use the property fill:
path {
fill: red;
}
<svg xmlns="http://www.w3.org/2000/svg" style="max-height:100px;
margin-bottom: 30px;" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path style="width: 2500px;" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
<path style="width: 2500px;" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
<path style="width: 2500px;" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>

SVG not working properly in IE9

i'm having an issue with 3 SVG icons, and i don't know exactly why, because the same css is being apply in other icons, but they are working 100%.
The following problem is happening in IE9:
Chrome:
http://i.stack.imgur.com/gYfsb.png
IE9:
http://i.stack.imgur.com/q2220.png
In my search i found that i need add this metadata in the SVG tag:
xmlns="http://www.w3.org/2000/svg" version="1.1"
But didn't work.
The other icons is from fontastic
The codes:
1:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
<path d="M340.377,292.154H227.178v-124.4h36v88.4h77.199V292.154z M389.404,378.858 c29.393-32.142,47.327-74.937,47.327-121.924c0-99.814-80.915-180.73-180.731-180.73c-99.815,0-180.73,80.916-180.73,180.73 c0,46.986,17.935,89.781,47.326,121.924c-9.047,22.51-20.913,52.037-28.938,72.002c-1.211,3.014-0.317,6.465,2.204,8.513 s6.086,2.219,8.786,0.413c18.391-12.305,45.747-30.606,65.463-43.797c25.548,13.824,54.801,21.677,85.889,21.677 s60.342-7.853,85.89-21.677l65.463,43.797c2.701,1.807,6.264,1.643,8.786-0.404c2.523-2.047,3.418-5.499,2.206-8.515 L389.404,378.858z M256,392.666c-75.013,0-135.73-60.707-135.73-135.731c0-75.013,60.706-135.73,135.73-135.73c75.013,0,135.731,60.704,135.731,135.73C391.731,331.945,331.026,392.666,256,392.666z M174.875,62.454c-12.251-7.292-26.556-11.491-41.848-11.491c-45.287,0-82,36.713-82,82c0,15.057,4.068,29.158,11.153,41.284C83.734,123.916,124.338,83.614,174.875,62.454z M449.82,174.246c7.085-12.126,11.152-26.227,11.152-41.283c0-45.287-36.713-82-82-82c-15.292,0-29.597,4.199-41.847,11.491C387.662,83.613,428.266,123.916,449.82,174.246z"></path>
</svg>
2:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" width="20px">
<path d="M407.448,360.474c-59.036-13.617-113.989-25.541-87.375-75.717c81.01-152.729,21.473-234.406-64.072-234.406c-87.231,0-145.303,84.812-64.072,234.406c27.412,50.482-29.608,62.393-87.375,75.717c-59.012,13.609-54.473,44.723-54.473,101.176h411.838C461.919,405.196,466.458,374.083,407.448,360.474z"></path>
</svg>
3:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
<path d="M407.447,380.817c-50.919-11.622-112.919-41.622-94.652-80.682c11.732,19.236,48.084,30.361,76.4,13.736c-81.506-20.57,40.066-161.795-66.458-240.959c-38.877-29.041-95.209-29.373-133.474,0c-106.524,79.164,15.048,220.389-66.458,240.959c28.316,16.625,64.723,5,76.4-13.736c18.268,39.064-43.786,69.072-94.652,80.682c-59.041,13.475-54.473,52.025-54.473,80.176h411.838C461.919,432.843,466.489,394.294,407.447,380.817z"></path>
</svg>
I don't believe this is a problem with the CSS, because the other icons is with the same style.

Have you tried setting a height or at least a max-height? It's hard to say without seeing the code for the page, but it looks like the SVG element is taller than it needs to be (with the image itself scaling down into the center based on the width you've applied).