I often scan through the elements in websites and keep seeing things like:
<svg width="13" height="13" viewBox="0 0 13 13" version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" data-ui-test="undefined-svg">
<use x="0" y="0" width="13" height="13" xlink:href="/images/icons/icon_definitions.svg#heart"></use></svg>
How can I use the icons like that on my website? I tried going to W3.org to find out how but it is not very clear how to do it, if at all I can. Anyone care to explain?
You will see similiar code if you open any .svg file in some text editor. It's just two-dimensional vector described in XML language which can be directly used in HTML.
SVG is a language based on XML for describing two-dimensional vector and mixed vector/raster graphics.
source: w3.org/TR/SVG2/
As an example you can check iconsvg.xyz. Each of these icons are downloadable as .svg but you can see their code right above the download button.
I don't know much about SVG icons but I've used some in my project. The format is as shown below in the snippet I created. There is a website I use with free icons but they are not as much. The website is https://iconsvg.xyz/. It gives you the full code of the icon you will choose where you just paste it into your HTML file.
<div>
<h5>This is a user icon</h5>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"/><circle cx="12" cy="10" r="3"/><circle cx="12" cy="12" r="10"/></svg>
<h5>This is a brand icon</h5>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000"><path d="M12.04 3.5c.59 0 7.54.02 9.34.5a3.02 3.02 0 0 1 2.12 2.15C24 8.05 24 12 24 12v.04c0 .43-.03 4.03-.5 5.8A3.02 3.02 0 0 1 21.38 20c-1.76.48-8.45.5-9.3.51h-.17c-.85 0-7.54-.03-9.29-.5A3.02 3.02 0 0 1 .5 17.84c-.42-1.61-.49-4.7-.5-5.6v-.5c.01-.9.08-3.99.5-5.6a3.02 3.02 0 0 1 2.12-2.14c1.8-.49 8.75-.51 9.34-.51zM9.54 8.4v7.18L15.82 12 9.54 8.41z"/></svg>
</div>
Related
I'm working on a project that uses svg. I generate this svg code thanks to an ocaml library:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" version="1.1" width="161.8mm" height="100mm" viewBox="0 0 161.8 100" color-profile="auto" color-interpolation="linearRGB" color-interpolation-filters="linearRGB">
<g fill="none" stroke-miterlimit="9.98123" transform="matrix(100 0 0 -100 -0 100)">
<defs>
<path id="i1" d="M0 0L1.618 0L1.618 1L0 1Z"/>
</defs>
<use l:href="#i1" fill="#50C878"/>
</g>
</svg>
When I use gthumb or GIMP to display the svg, it prints the correct green square. However, when I include this block of code in Chromium or Firefox, the block appears in the html tree but nothing is display. This is the first time I use svg: after several researches on Google, I can't find anything....
Does someone know why it doesn't work ?
Edit
Solve with the answer:
<use xlink:href="#i1">
I would like to change only part of the color of Material icons (from google) like in the image. In the image it only shows the bottom bar changing color, not the entire A.
I went to several questions that only showed how to change the entire color of the materialize icon.
I realize that I can use svg, and I can break the image up into different paths and then specify the color of each of them as stated in jdnz's answer.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M5 17v2h14v-2z" fill="#00FFFF"/>
<path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
However, I have several images, and I don't want to create many svg's.
If you use svg you can break the image up into different paths and then specify the color of each of them.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path d="M5 17v2h14v-2z" fill="#00FFFF"/>
<path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
I am using inline svg like this
<use xlink:href=""></use>
but for some reason one particular icon is not shown in Chrome (but it's shown in Firefox and ios Safari), other icons are visible in Chrome.
Here's icon itself (it is exported from icomoon)
<symbol id="icon-phone" viewBox="0 0 32 32">
<title>phone</title>
<path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</symbol>
I've also tried to use just href instead of xlink:href, but it didn't work either.
<symbol id="icon-phone" viewBox="0 0 32 32">
and
</symbol>
wrapper and replace it with
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
and
</svg>
I'm hoping someone can point out where my bug is with this little problem I have.
I can't resize one <symbol> from an external svg with CSS, but I can another <symbol> from the same external svg.
In the CSS I'm changing the width and height. Which #pluss handles fine, whereas #heart completely ignores it. It just wants to stay at 24px * 24px regardless of CSS sizing.
I can't tell what I'm doing differently. Headscratchingly confusing!
The external icons-defs.svg file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pluss" viewBox="0 0 24 24" aria-labeledby="title">
<title>Add</title>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<symbol id="heart" viewbox="0 0 24 24" aria-labeledby="title">
<title>Favourite</title>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</symbol>
</svg>
And in HTML:
<button>
<svg class="icon-heart" role="presentation">
<use xlink:href="icons-defs.svg#heart"></use>
</svg>
Like
</button>
<button>
<svg class="icon-pluss" role="presentation">
<use xlink:href="icons-defs.svg#pluss"></use>
</svg>
Add Goal
</button>
When having the same svg with symbols inline at top of the HTML document it works fine.
Any pointers would be much appreciated :)
#robert-longson wrote the solution in a comment, so I'm copy-pasting it here.
One symbol has a viewBox, one does not. SVG is case sensitive so viewbox is not a functional attribute. HTML is not case sensitive so it works inline when parsed by a HTML parser.
So changing viewbox to viewBox (capital B) fixed my bug.
I'm searching a way to make those svg path, but without luck for now.
I was searching on the internet for a long time ...
I know that css can do this but if someone knows how to build them with SVG it would be really nice.
Thank you
First SVG :
Second SVG :
You should learn about SVG path commands.
https://www.w3.org/TR/SVG2/paths.html#PathData
For example, you can define such shapes by list of some path commands.
<svg viewBox="0 0 200 200" width="200" height="200">
<path d="M0 0l60 60a1 1 0 0 0 80 80l60 60h-200z"/>
</svg>
<svg viewBox="0 0 200 200" width="200" height="200">
<path d="M0 0l60 60a1 1 0 0 1 80 80l60 60v-200z"/>
</svg>