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>
Related
I have this Simple SVG with text inside, on chrome and Safari its working fine, but on FIREFOX the last alphabet of the text is not showing at all. (in this case 'l' from 'atul' is not showing on firefox.)
<svg viewBox="0 0 100 100" height="250" width="250">
<path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="1.99" style="fill: red;"></path>
<text font-size="6" text-anchor="middle">
<textPath href="#p1" startOffset="1" side="center" style="letter-spacing:1px;font-weight:600;text-transform:uppercase; dominant-baseline: ideographic;">Atul</textPath>
</text>
</svg>
just copy and paste this svg in your HTML and try to render it in Firefox.
I want to understand the problem along with solution if anyone can explain please.
Thanks in advance.
The issue is that there's trailing whitespace after the </textPath> Firefox stops the textPath processing one character too soon when it encounters that whitespace.
This is fixed in bug 1809688. It's currently scheduled to be fixed in Firefox 111, but you can try it in a nightly already.
I'm not able to explain this, but here I have three different SVG elements. The first two are modified versions of the code that I copied from your snippet. They both have the issue. And the last one is an edited version of the example on MDN. So, example 2 and 3 are how I would write the code -- using SVG attributes for most of the styling, but most importantly the pathLength should have a larger value to avoid any rendering problems.
Even though I removed all the attributes and styling possible from example 1 it still has the issue. And as I see it example 2 and 3 are exactly the same code (except from the ids referring to the paths), so I'm not able to explain the difference.
If anyone can spots the difference please comment.
Well, try to rewrite your code... 🙂
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p1" fill="none" d="M50 10 a 40 40 1 1 0 1 0 z"/>
<text>
<textPath href="#p1">Atul</textPath>
</text>
</svg>
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p2" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
pathLength="100"/>
<text font-size="6" font-weight="600" text-anchor="middle"
dominant-baseline="ideographic"
style="text-transform: uppercase;letter-spacing:1px;">
<textPath href="#p2" startOffset="50">Atul</textPath>
</text>
</svg>
<svg viewBox="0 0 100 100" width="200" height="200">
<path id="p3" fill="red" d="M50 10 a 40 40 1 1 0 1 0 z"
pathLength="100"/>
<text font-size="6" font-weight="600" text-anchor="middle"
dominant-baseline="ideographic"
style="text-transform: uppercase;letter-spacing:1px;">
<textPath href="#p3" startOffset="50">Atul</textPath>
</text>
</svg>
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 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>
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>