I've been having problems with symbols in SVG files. They are currently not displaying in browsers.
For example I created this basic SVG file in inkscape to show the problem:
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100" width="100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<symbol id="circle">
<circle style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" stroke-width="3.257" stroke="#008000" cy="1000.1" cx="34.598" r="12.879"/>
</symbol>
</defs>
<g transform="translate(0 -952.36)">
<use xlink:href="#circle"/>
</g>
</svg>
And it should look like this:
But for some reason its not displaying as such in chrome, does anyone know why?
You're drawing the initial symbol mostly outside the viewbox - your viewBox is 100 x 100, but your cy is 100.1. This seems to disable drawing completely, so when you bring it back into the viewbox with the translate, there's nothing there. Adjust your cy so you're drawing inside the viewbox and reduce your translate to compensate.
Related
Im using object and use in order to have a single file for all my svg icons. But what Im seeing is that icons.svg file gets redownloaded every time a new icon is used in application. It's not strictly for every icon but it seems to happen very often. I couldn't diagnose it in my searches.
Is this normal behavior? Should it keep downloading the file? Am I just supposed to cache it?
How I include svg file to index.html:
<object type="image/svg+xml" data="/static/icons.svg" style="display: none;"></object>
How I use icons in various places:
<use href="/static/icons.svg#foo"></use>
<use href="/static/icons.svg#bar"></use>
Example icons.svg:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="foo" viewBox="0 0 100 100">
<circle cx="69.37" cy="37.27" r="16.97"/>
</symbol>
<symbol id="bar" viewBox="0 0 100 100">
<circle cx="69.37" cy="37.27" r="16.97"/>
</symbol>
</svg>
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
Let's start with the end-result I'm trying to achieve:
Where the length and height of the parallelogram can change independently of each other, but where the angle of the sides do not change.
With that out of the way, let's talk about why and what I've already done.
I'm fairly inexperienced with SVG, but I already know that CSS isn't enough to do what I want to do, which is to make responsive buttons that look like the above image - except that sometimes the left or right side is straight.
Initially, for those, I designed a massively wide SVG that could be used as a background and then scaled up and aligned to the left or right (as a background) so that the excess gets cut off but so that the aspect ratio does not change. For some reason that I haven't spent any time debugging, that does not work as designed.
Then, I learned a little bit more about SVG and learned about preserveAspectRatio. I used this nifty feature to make SVGs that themselves were responsive:
<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 200 50" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
<rect x="22" height="50" width="178" style="fill:green;">
</rect>
<svg id="left-corner" viewBox="0 0 27 50" preserveAspectRatio="xMinYMin meet">
<polygon points="22,0 27,0 27,50 0,50" style="fill:green;"/>
</svg>
</svg>
and
<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 200 50" preserveAspectRatio="xMaxYMin slice" xmlns="http://www.w3.org/2000/svg">
<rect height="50" width="178" style="fill:green;">
</rect>
<svg id="right-corner" viewBox="0 0 27 50" preserveAspectRatio="xMaxYMin meet">
<polygon points="0,0 27,0 5,50 0,50" style="fill:green;"/>
</svg>
</svg>
These two very easily maintain the aspect ratio of the triangle making up the side (meet) while forcing the rectangle to expand to fill the remaining space. Perfect! It does this using xMaxYMin when the triangle is on the right and xMinYMin when the triangle is on the left.
However, and fairly obviously, this approach doesn't work when you want one on the left AND one on the right!
My first attempt was a fairly silly trial of xMidYMin, which put the viewport on the center of the rectangle, but as the height expanded the edges went further outward and the triangles never showed themselves - instead rendering one gigantic rectangle!
My next attempt was very close, by removing the rectangle I achieve nearly my desired effect!
<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
<svg id="left-corner" viewBox="0 0 27 50" preserveAspectRatio="xMinYMin meet">
<polygon points="22,0 27,0 27,50 0,50" style="fill:green;"/>
</svg>
<svg id="right-corner" viewBox="0 0 27 50" preserveAspectRatio="xMaxYMin meet">
<polygon points="0,0 27,0 5,50 0,50" style="fill:green;"/>
</svg>
</svg>
The problem here though, is that while it does expand up and down, the longer it gets the more it indents from the end!
I've also tried embedding both the start and end cuts as separate SVG into one SVG with a width of 50% (one on each side) but the embedded SVGs are stretched instead of resized when preserveAspectRatio is off for the main image, and it doesn't expand to fill space the way I need it when it's on.
<?xml version="1.0" encoding="utf-8"?>
<svg id="main-box" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<svg id="start-cut" viewBox="0 0 200 50" width="50%" height="100%" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
<rect x="22" height="50" width="178" style="fill:green;">
</rect>
<svg id="left-corner" viewBox="0 0 27 50" preserveAspectRatio="xMinYMin meet">
<polygon points="22,0 27,0 27,50 0,50" style="fill:green;"/>
</svg>
</svg>
<svg id="end-cut" viewBox="0 0 200 50" width="50%" x="50%" preserveAspectRatio="xMaxYMin slice" xmlns="http://www.w3.org/2000/svg">
<rect height="50" width="178" style="fill:green;">
</rect>
<svg id="right-corner" viewBox="0 0 27 50" preserveAspectRatio="xMaxYMin meet">
<polygon points="0,0 27,0 5,50 0,50" style="fill:green;"/>
</svg>
</svg>
</svg>
What can I do to keep both the left and right corners in their proper place, with their proper angle (so they must keep their aspect ratio) while the middle expands (does not need to keep it's aspect ratio)?
Here's code for a responsive SVG parallelogram:
<svg id="main-box" viewBox="0 0 2000 500" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<style>
rect {
fill:black;
}
</style>
<rect x="190" y="0" width="90%" height="100%" transform="skewX(-20)" />
</svg>
Note the use of the skewX transform and the rect and width values to give the SVG its shape. It works fine. However, the only issue I had was when trying to use this as a background image on the body tag. There was an issue with incorrect sizing in Firefox. Researching the issue, it seems to be caused by different interpretations of the spec, rather than an unintentional bug.
You can see the use of this parallelogram on a side project I created: https://thisisa.lockdownchemz.link/
I'm not sure I understand what you want to achieve. Is it something like this :
<svg id="main-box" viewBox="0 0 100 40" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 73,0 100,40 27,40" />
</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.
Inside my website, I am embeding a few svgs. They all seem to work just fine in Chrome, Firefox, IE(9+) and in Safari. Howvere as soon as there is image included in the svg, safari does not render the image.
Based on the previous similar topic I have tried the following:
SVG <image> elements not displaying in Safari - enclosing
<use>
tag like this <use></use>
SVG Image dosen't appear in Safari - I dont find this very usefull,cause this is deleting aprt of the svg.
Not able to render SVG image in Safari - Added
<meta http-equiv="Content-Type" content="application/xhtml+xml"> in header.
And beyond that, I dont really know what else to try. Maybe one more interesting thing to note is that inside my page, image is not displayed, but I can open svg file in safari(just the file) and it will be renderd correctly. Further more, after it's opened in the browser as a file, it renders inside the page as well. And I embed the svg to the page with img tag.
<img src="mysvg.svg" class="center-block"/>
This is my svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
<defs>
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"></use>
</clipPath>
<g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)">
<g id="DSC_x5F_0112-2.psd_1_" enable-background="new ">
<image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
</image>
</g>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
L164,1.415L1.414,164.002z"/>
</g>
</svg>
I have reduced base64 image string, to shorten the code. Full svg can be found here.
UPDATE: Just to be clear, svg shows in the browser(safari) but image is missing (I can see just border).
It looks like this WebKit bug is responsible for the problem: https://bugs.webkit.org/show_bug.cgi?id=99677
The workaround we use in our application is to have a script which finds all img elements displaying SVG images and add hidden object elements loading the same SVGs (<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>).
The reason it works is that the object tag properly loads the embedded images into the image cache, so that they are visible within the SVGs loaded using the img tags.
The advantage of this approach is that the images are still displayed using the img tag, so that the workaround can be applied (and later removed cleanly when the browsers are eventually patched) without affecting the rest of the application/website.
The disadvantage is the creation of an extra object tag for each SVG image.
This solution works for me when displaying an embedded SVG image in Safari.
replace
<img src="image.svg">
with
<object data="image.svg" type="image/svg+xml"></object>
I ran into this problem where I was using Ajax to load the svg spritesheet onto the page. If I had a on the page before the spritesheet was loaded, it would fail and would not resolve once the spritesheet was avaialble. Any added to the dom after the spritesheet was loaded were fine. I had to delay putting the items in the dom until after the spritesheet finished loading.
This only affected IOS. All other browsers didn't care about the order.
It seems that answer from this question works: What could make Safari skip clip-path AND mask with SVG?. See instructions in link from answer.
You have to recreate your clip path to make it visible. And </clippath> tag is not pushed after </image> tag.
Here is the little changed code (link to my image inserted so you will have to change it):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" >
<g>
<clipPath id="SVGID_2_">
<!--use xlink:href="#SVGID_1_" overflow="visible"></use-->
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" />
</clipPath>
<defs>
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/>
</defs>
</g>
<image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
</image>
<g>
<path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
L164,1.415L1.414,164.002z"/>
</g>
</svg>
So Anto Jurković pointed out, there are some known issues with Safari and clipPath. What Safari likes is if you dont define polygon but put it straight in to clippPath. Also you must then group clipPath separately.
But I still could not get svg to render the image if I used img tag for svg - <img src="svg"/>. So at the end I have embeded it like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
<clipPath id="SVGID_2_">
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/>
</clipPath>
</g>
<image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k=">
</image>
<g>
<path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
L164,1.415L1.414,164.002z"/>
</g>
</svg>
I can confirm that this renders correctly in mobile safari(on ipad and iphone, windows safari and mac safari - latest versions).
So to sum it up...I have this svgs in separate html file and render them when needed.