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.
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 trying to embed a set of SVG images in a blank web page.
<html><head></head>
<body>
<img width="117px" src="img/icone/phone_hex034F84.svg" alt="image">
<img width="320px" src="img/illustrazioni/SHIPPER3.svg" alt="image">
</body>
</html>
Both files are self-contained svg generated by Illustrator.
While the first does render in the browser the second (SHIPPER3.svg) doesn't.
See the code: http://104.155.112.173/land/img/illustrazioni/SHIPPER3.svg
You can download the full source from the previous link as I cannot embed it in the question (too large). Although, I'll embed here just the preamble.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="_x5B_SHIPPER1_x5D_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 733.3 587.8" style="enable-background:new 0 0 733.3 587.8;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{fill:#EDEDED;}
.st2{fill:#F2F2F2;}
If I copy and paste SHIPPER3.svg in http://www.freecodeformat.com/svg-editor.php it does render. I can also open it in Sketch with no problems.
I tried to embed SHIPPER3.svg also as inline svg but same, again, no show.
What I am missing?
Several problems in your SHIPPER3.svg:
all your top-level groups has class st0 which is said to be clipped out by clipPath that is outside entire viewBox
clipPath #SVGID_2_ has style="display:none;" what also hides it
See:
<svg version="1.1" viewBox="0 0 733.3 587.8">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
/* ... */
</style>
<defs>
<ellipse id="SVGID_1_" cx="1085.6" cy="279.3" rx="251.8" ry="233.4"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/>
</clipPath>
<g class="st0">
<!-- ... -->
</g>
</svg>
Further to a comment I left above, you may wish to replace the <clippath id='SVGID_2_' element with the following:
<clipPath xmlns="http://www.w3.org/2000/svg" id="SVGID_2_">
<ellipse xmlns="http://www.w3.org/2000/svg" id="SVGID_1_" cx="360" cy="290" rx="325" ry="260"/>
</clipPath>
This does 2 things. (0) it removes the link to the SVGID_1_ element by inserting the data that was inside it directly. (1) repositions and sizes the ellipse
Our svg icons included using the img tag are getting incorrectly resized, cut off, or completely hidden when displayed in IE9.
The solution in https://gist.github.com/larrybotha/7881691 (setting the viewBox, removing width and height) does not help and neither does including the images as background.
When included using the tag, the SVGs display properly (but then they do not display in some modern browsers like chrome)
One of the icons we use has the following source:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by IcoMoon.io -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 640 640">
<metadata id="metadata167">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path id="path161" fill="#c6c6c6" d="m227.88,640.44c-19.924,0-38.795-9.298-50.887-25.329l-163.69-216.1c-21.298-28.12-15.756-68.15,12.367-89.45,28.169-21.34,68.155-15.76,89.456,12.37l107.68,142.17,270.79-434.72c18.64-29.909,58.03-39.07,87.98-20.428,29.91,18.596,39.07,58.032,20.39,87.942l-319.85,513.45c-11.13,17.909-30.321,29.131-51.345,30.047-0.96187,0.0458-1.9237,0.0458-2.8856,0.0458z" stroke="#c6c6c6"/>
</svg>
Any idea on what we could do to make SVG render properly in IE9?
I can't be sure that this will answer your question without seeing the specific code you're having problems with, Jakub. But I always include the following attributes in every SVG element, as a minimum. This always gives me a good level of cross-browser consistency, back to IE9:
<svg height="40" version="1.1" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
If that doesn't help, could you share your code?
Wrapping the svg into a div and giving that a width seems to work fine for me.
http://codepen.io/anon/pen/qONXzz
.svg-test{
width: 50px;
}
It seems that the only method for embedding and resizing an external xml file that works correctly in all browsers is the one described in http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
So instead of
<img src="./images/icons/icons-complete.svg" style="width: 11px;height:11px;"/>
you can use
<svg height="11" width="11"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="scale(0.0172)">
<image x="0" y="0" height="640" width="640" xlink:href="/images/icons/icons-complete.svg"/>
</g>
</svg>
So I'm trying to make a simple textpath .svg that would be a vertical line with some text. The problem I am getting is that the <defs> tags seem to throw everything off. I think it has something to do with my xlink:href but I can't seem to pin down what exactly.
<svg version="1.1"
baseProfile="full"
width="20" height="600"
xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="testPath" d="M 10 10 L 10 600 z"
stroke="black" stroke-width="3" />
</defs>
<text>
<textpath xlink:href="#testPath">
teeeest
</textpath>
</text>
</svg>
Any help would be appreciated.
Your sample will work fine inlined in a browser, because the browser knows about the xlink namespace.
If your SVG is an external file, then more strict XML parsing is performed and all namespaces used have to be defined.
All you need to do is add a definition for the xlink namespace to your outermost <svg> element.
<svg version="1.1"
baseProfile="full"
width="20" height="600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
SVG is a case sensitive language so textpath actually needs to be written as textPath.
If you embed the SVG in html then you don't need namespaces as html doesn't support them (unlike xhtml). If you have your SVG standalone you'll also need xmlns:xlink="http://www.w3.org/1999/xlink" on the root <svg> element.
I would like to reference an svg embedded in one html document in another html document in the same folder. I don't need a fallback, but I would prefer one. I have seen: HTML - pick images of Root Folder from Sub-Folder, and How to link html pages in same or different folders?, and Do I use <img>, <object>, or <embed> for SVG files?.
I have one html document with the svg that I would like to reference here: (this document is called "pd_unit_red_fighter_v.0.0" and is located in the same folder)
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<svg id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
<g stroke-width=".25" stroke="#000" fill="#ccc" >
<circle cx="12" cy="12" r="11.5" fill="#800" />
</g>
</svg>
</body>
</html>
I have another html document and I would like this document to reference the svg in the other one:
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<object data="red_fighter.svg" type="image/svg+xml">
<img src="./pd_unit_red_fighter_v.0.0.html" />
<a href="#./pd_unit_red_fighter_v.0.0.html" >
<img class="logo" src="red_fighter.svg" width="240" height="240"/>
</a>
</object>
</body>
</html>
I have tried both the object tag and but I cannot get it to work. Is there another tag I should use or am I using the wrong information? I am new to this so I apologize for my lack of knowledge.
When you reference an SVG file using an object or image tag it must actually be an SVG file and not svg data embedded in an html file so you want red_fighter.svg to be
<svg xmlns="http://www.w3.org/2000/svg" id="red_fighter" width="480" height="480" viewBox="0 0 24 24">
<g stroke-width=".25" stroke="#000" fill="#ccc" >
<circle cx="12" cy="12" r="11.5" fill="#800" />
</g>
</svg>
Note the namespace attribute which is mandatory for standalone SVG files.
Then you can reference it using an object or img tag.
Take care that the svg file is served with the correct mime-type (try viewing it directly to check it works first).