EDIT: Firefox seems to be the only browser that supports this. I'm
looking for a solution for Chrome.
I'm trying to have a svg header that repeats on multiple pages of a website, and I can achieve that with <use>, but the problem is that a hyperlink in the svg (namely the logo) does not respond to click events.
Here is a simplified snippet that shows the problem. The left box with the inline hyperlink works fine, but when it is included via the <use> tag, it doesn't respond to a click, as can be seen with the right box.
<svg width="300" height="100">
<svg id="link">
<a href="https://google.com">
<rect width="100" height="100" />
</a>
</svg>
<use x="200" xlink:href="#link"></use>
</svg>
It's also available here: https://jsfiddle.net/sh8276gu
Because SVG is XML based and not HTML based, you can't use a normal HTML <a> tag and instead have to include links using Xlink.
This is the same type of linking method you applied within your <use> tag. The reformatted code using Xlink would look like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="100">
<svg id="link">
<a xlink:href="https://google.com">
<rect width="100" height="100" />
</a>
</svg>
<use x="200" xlink:href="#link"></use>
</svg>
You can read more about including links in SVG here.
Related
I have an SVG image with an illustration of a cloud.
The cloud is going to be used in several weather icons. I have another SVG file that embeds the cloud illustration and adds another graphical element, a circle.
Now, this main SVG file shows up fine when I open it directly in the browser:
However, when I use the file as a background-image, the cloud is not rendered:
Here's a JSFiddle.
What the heck?
It shouldn't be a relative path issue because the image shows up fine when I call the main SVG in the browser (and I tried using an absolute path to no avail)
It's not a clipping issue - if you change the background-size property in the JSFiddle, you'll see the entire image area is rendered, just without the cloud.
The cloud was generated by Adobe Illustrator and not optimized yet, but seems to look ok.
This is the main SVG's markup:
<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="0" cy="-0" r="30" style="fill:red" />
<image x="12" y="12" width="20" height="40" xlink:href="elements/cloud.svg" />
</svg>
What am I doing wrong?
I've tested this in Safari 9.1.2 and latest Chrome on OS X, with the same result.
All SVGs that are inserted as images (through the img tag or as a background-image) cannot reference external files. So if you have an external CSS stylesheet, a custom font, or as in your case an external image, it won't work.
The solution would be to embed the image data within the xlink:href attribute:
<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="0" cy="-0" r="30" style="fill:red" />
<image x="12" y="12" width="20" height="40" xlink:href="data:image/svg+xml,%0A%3Csvg%20id%3D%22Ebene_1%22%20data-name%3D%22Ebene%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20284%20179%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bfill%3A%23508f9e%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%20transform%3D%22translate(-278.44%20-208.09)%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%22279.44%22%20y%3D%22207.09%22%20width%3D%22284%22%20height%3D%22179%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cg%20id%3D%22TK6tin%22%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M562.44%2C302.09c-4.19%2C9-7.71%2C18.44-13.39%2C26.63-9.1%2C13.12-21.26%2C22.65-35.52%2C30.06C497.65%2C367%2C481%2C372.3%2C463.34%2C373.68c-17%2C1.33-32.1-3.68-43.58-16.9-3-3.43-4.87-2.72-7.56-.06-6%2C5.92-11.9%2C11.83-19.1%2C16.52-9.22%2C6-19.37%2C9.45-29.58%2C13a4.17%2C4.17%2C0%2C0%2C0-1.09.89h-19c-7.91-2.63-15.56-5.83-21.8-11.53a10%2C10%2C0%2C0%2C0-6.55-2.63c-15.38-1.29-32.37-10.18-35.09-28.87-0.38-2.61.39-5.62-1.56-8v-5c2.09-3.79%2C1.2-8.2%2C2.85-12.26%2C2.87-7.07%2C8.91-9.62%2C15-11.45%2C5.41-1.62%2C9.87-3%2C11.87-9%2C3.9-11.71%2C12.39-17.5%2C24.66-17.08%2C5.43%2C0.18%2C7.92-1.18%2C10.39-6.77%2C4.51-10.24%2C12-18.52%2C21.06-25.77A171.48%2C171.48%2C0%2C0%2C1%2C398.75%2C227c20.39-9.63%2C41.2-17.45%2C64.13-17.83%2C1%2C0%2C2%2C.11%2C2.55-1.06h7c2.35%2C2.26%2C5.3.64%2C7.93%2C1.21%2C13%2C2.81%2C25.88%2C6.08%2C37.28%2C13.42%2C8.3%2C5.35%2C17.12%2C10.07%2C23.36%2C18a94%2C94%2C0%2C0%2C1%2C10.57%2C17.12c4.56%2C9.4%2C9.31%2C18.73%2C10.86%2C29.24v15ZM318.12%2C365.24c1.49%2C0.13%2C1.71%2C1.24%2C2.29%2C2a37.42%2C37.42%2C0%2C0%2C0%2C25.1%2C14.71c15%2C2%2C28.63-2.48%2C41.61-9.82C397.41%2C366.3%2C405%2C357.4%2C413.92%2C350c2.08-1.74%2C3.65-2.89%2C5.66-.08%2C12.35%2C17.29%2C30.17%2C21.51%2C49.68%2C19a127.56%2C127.56%2C0%2C0%2C0%2C54.87-21c16.7-11.17%2C26.73-27.07%2C33.68-45.37%2C0.68-1.8.5-3.59%2C0.63-5.41%2C1.16-16.58-6.55-30.39-13.88-44.3a39.91%2C39.91%2C0%2C0%2C0-7.73-10.86c-13.58-12.69-28.91-22-47.27-26.37-15.43-3.68-30.69-3.42-46.1-.72-15.69%2C2.75-30.25%2C8.85-44.45%2C15.69-23.79%2C11.46-45.28%2C25.58-54.66%2C52.22a3.16%2C3.16%2C0%2C0%2C1-3.27%2C2.38c-3.81.17-7.6%2C0.73-11.42%2C1-9.24.54-15.85%2C4.7-17.71%2C13.68-1.27%2C6.13-4.13%2C9-9.56%2C10.64-1.3.39-2.6%2C0.42-3.85%2C0.75-5.69%2C1.52-11.51%2C3.66-13.65%2C9.54-4.64%2C12.77-2.74%2C26.7%2C6.27%2C37.43%2C6%2C7.19%2C14.75%2C9.64%2C23.74%2C10.93%2C0.84%2C0.12%2C1.74%2C1.26%2C2.8.06C317.92%2C368%2C316.87%2C366.61%2C318.12%2C365.24Z%22%20transform%3D%22translate(-278.44%20-208.09)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
</svg>
Please follow the explanation in this link:
https://css-tricks.com/using-svg/
You need to enter the full svg code. you can get it from photoshop or online tools like this:
.background-img {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>") no-repeat;
height: 30px;
width: 30px;
}
I'm building an icon solution using SVG, where parts of icons need to be reusable. There are a few different <svg /> elements inline in my HTML document, and the <use /> element works perfectly for reusing shapes – rects, paths and so on, even between svg elements.
However, reusing other definitions, like <radialGradient /> doesn't work for me. When the gradient is defined within a <defs /> element in the same <svg /> element, it works as expected, but not when the gradient is defined in another <svg /> element.
Pseudo code
<!-- Near the top of my BODY element -->
<!-- This is where I keep the SVG stuff I want to reuse -->
<svg id="for-reuse" style="display:none">
<defs>
<path id="marker" d="M63 127L49 93C44 80 52 69 63 69L64 69C75 69 83 80 78 93L64 127" />
<radialGradient id="shadow">
<stop offset="10%" stop-color="rgba(0,0,0,0.4)" />
<stop offset="90%" stop-color="rgba(0,0,0,0)" />
</radialGradient>
</defs>
</svg>
<!-- Further down the html document -->
<svg viewBox="0 0 128 128" style="width:64px; height:64px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- This use element works fine! -->
<use xlink:href="#marker" style="fill:black" />
<!-- But this fill attribute does not! -->
<rect x="5" y="5" width="20" height="20" fill="url(#shadow)" />
</svg>
Why is it possible to use shapes from other svg elements, but not attribute values like this? When I move the shadow gradient into a defs element inside the visible svg element, the reference works perfectly.
Here is a JSFiddle that illustrates both working and non-working: https://jsfiddle.net/7tfna0L8/2/
The solution
Robert Longson pointed out that my "repository" of reusable svg had a style of display:none. For me, that feels like the correct way to do this. After all, this repository should not be displayed in any way. The problem is that the browser optimizes this by probably not even parsing any style at all, which makes it possible to reference elements, but not style (like my gradient)
Working jsFiddle: https://jsfiddle.net/atornblad/7tfna0L8/3/
Your far-gradient is in an svg which has a style of display:none. That disables all CSS within that fragment so it doesn't work. Try width="0" height="0" instead of display:none.
I'm trying to reference an SVG file using the "img" tag:
<img width="200" height="100"
src="test.svg"
onerror="this.onerror = null; alert('error');"
/>
Generally this works, but if "test.svg" has an embedded .jpg image, then the image does not render. This is true in Chrome and Firefox -- IE does render the image correctly. Strangely, if I load "test.svg" directly in the browser, then the embedded image renders correctly on each of the browsers.
Here's an example of "test.svg" that shows what I mean:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="100">
<!-- Text and shapes always render correctly -->
<text x="20" y="20" font-size="20">some text</text>
<ellipse ry="30" rx="30"
cy="50" cx="50"
stroke-width="5" stroke="#000000"
fill="#FF0000"
/>
<!-- Embedded images render in IE, but not in Chrome or Firefox -->
<image xlink:href="test.jpg"
width="100" height="100"
x="100" />
</svg>
I haven't been able to find a definitive answer. Is this a bug in Webkit?
Any SVG image embedded via the <img> tag must be self-contained. Any external references it has, such as to images, fonts or CSS files, will not be loaded.
The reasons for this are explained here: https://bugzilla.mozilla.org/show_bug.cgi?id=628747
FF and webkit have made this change. I guess IE hasn't yet.
You could possibly use an <object> tag with optional fallback to better handle svgs. Here's something you can do -
<object width="200" height="100" data='test.svg' onerror="this.onerror = null; alert('error');">
<!-- fallback -->
<img width="200" height="100" src="test.svg" onerror="this.onerror = null; alert('error');" />
</object>
Where, your object tag will be loaded on first priority & if it fails for some reason, then your fallback will be loaded. In this case, I've written your original img as a fallback.
Chrome seems not to display <use> elements in inline svg. Here is an example (code below or view it at http://www.bobwyttenbach.com/chromeuse.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<g id="test1">
<circle cx="100" cy="100" r="50" fill="red"/>
</g>
</defs>
<g>
<rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
<use xlink:href="#test1" x="0" y="0"/>
</g>
</svg>
<p>Above is inline svg with a use tag; below is the same svg linked through an object tag. Below is correct.</p>
<object data="chromeuse.svg" width="200" height="200"></object>
</body>
</html>
The red circle does not appear in the inline svg but does appear when the same svg is linked through an object tag. Safari, Firefox, Opera, and Internet Explorer 9 all display the inline svg correctly.
Am I doing something wrong? Is this a known Chrome bug (I haven't found it listed)? Any workarounds?
Don't know if this question is still relevant, but I've met such a case recently and I pretty sure that somebody else will meet the case (especially those who tries to make use of SVG sprites for the first time).
In my case I've joined 16 SVG icons in one sprite manually into sprite.svg, and in this file I've omitted important meta information:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
I had no first line at all, and all I had on the second line was an opening <svg> tag with no meta attributes (xmlns and xmlns:xlink). As soon as I brought back all this omitted meta information, my graphics from sprite.svg started to display properly.
Hope it helps someone.
Ok so I deleted my last post as I incorrectly tried to figure out why the use element was working for me and not for you. What I can say is that I am using a modified version of this source, https://code.google.com/p/svg-edit/ , so in short, my answer is to walk through and see how they do it. I believe its demonstrated when you insert an image from their library.
I spent a long time debugging inline svg use elements not showing up. The chrome bug discussed by BobW seems fixed at this time. To eliminate the same issue caused by something else entirely, try commenting out the <base href="somethingsomethingsomething" /> tag from your HTML.
Of course, this will likely break every relative link on your site, but the <use> elements now show up. One step forward, half a step back :)
Related info here:
Using base tag on a page that contains SVG marker elements fails to render marker
I wanted to write a logo in svg, but surprisingly found that I could not re-use objects defined in <defs>...</defs>. I tried them on Chrome.
Please see examples:
test1.html doesn't work, no rect was drawn.
<!DOCTTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="480" height="360">
<defs>
<rect id="helo" x="0" y="0" height="20" width="20" />
</defs>
<use xlink:href="#helo" />
</svg>
</body>
</html>
BUT test2.svg works.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="480" height="360">
<defs>
<rect id="helo" x="0" y="0" height="20" width="20" />
</defs>
<use xlink:href="#helo" />
</svg>
What's needed to make the test1.html work?
Many thanks:)
It seems that this is a bug in Webkit:
Importing external SVG (with WebKit)
https://bugs.webkit.org/show_bug.cgi?id=12499
If you're going to create an SVG icon, I would make it in a separate .svg file and then add it into the HTML with the object tag. That would be better anyway since if you make changes to the SVG file and it will change all instance on your website.
The bug seems to have been fixed now however there is one important caveat here that when you are trying to re-use objects in the defs tag in SVG on a HTML page the xmlns:xlink="http://www.w3.org/1999/xlink" is important and must be added to the SVG tag. Without that the href isn't resolved.