I'm having an issue where I have a couple of SVGs that are not showing up in Firefox. They work fine in Chromium and Safari.
HTML
<svg
class="something">
<use xlink:href="sprite.svg#home" />
</svg>
CSS
.something {
width: 2rem;
height: 2rem;
fill: black;
cursor: pointer;
}
Sprite.svg
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="home" viewBox="0 0 32 32">
<path d="M28 17.333v13.333h-8v-8h-8v8h-8v-13.333h-4l16-16 16 16h-4zM26.667 9.457v-6.791h-4v2.791l4 4z"></path>
</symbol>
...
</defs>
</svg>
Upon inspection with developer tools, I can see the path for Chrome:
But not for Firefox:
What I have already tried based on other posts:
Made sure xmlns is declared, as well as width and height
Adding fill inherit to svg use svg (https://stackoverflow.com/a/38124867/2910611)
Made sure there are no commas in the d attribute of path
Playing with fill="currentColor" to see if it was instead a problem of fill
Using href instead of xlink:href
Any idea how to resolve this?
I see from caniuse that Firefox supports use xlink:href.
It seems to be a problem of rendering and not fill as changing the size of the icon isn't causing visible changes.
Found the issue: one of the symbols in the sprites file didn't have a closing tag. For some reason other browsers were still able to display all of them without complaining, but not Firefox.
Since it may happen to others, I'll keep the question posted.
Related
I have an SVG file and I'd like the text to be editable. Following advice on stackoverflow, I'm using <foreignObject> to acheive this. (Code example below.)
It works a treat in the Chromium browsers, Chrome and Edge.
It doesn't work in IE, but then it doesn't support <foreignObject>, so no surprise.
It also doesn't work in Firefox and I can't figure out why.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<style>
#text2edit {
font-family: Helvetica, Arial, sans-serif;
font-size:24px;
}
</style>
<path id="screen" d="M0 0h300v100H0z" fill="#00f"/>
<foreignObject x="10" y="10" width="280" height="50">
<div xmlns="http://www.w3.org/1999/xhtml" contenteditable="true" id="text2edit"
style="color: #d4defb; background-color:#000;text-align: center;">Click to edit</div>
</foreignObject>
<text width="300" height="25" x="0" y="60" fill="#fff">
You can click to edit (and click outside
</text>
<text width="325" height="25" x="0" y="85" fill="#fff">
the box when done). Chrome only :-(
</text>
</svg>
Ultimately I want this in an SVG file that's included in an HTML file (using <object>). To emulate this, I've saved the code above in an SVG file and look at it on my own machine via a localhost URL.
Curiously if I put it in a codepen (paste the SVG above as HTML), it works fine in Firefox. But then that's really because the SVG is in-lined into HTML, which I'm trying to avoid.
Is there a trick to get Firefox working. And is there a trick to get IE working too?
Could You help me that:
I have svg file:
FILE_SVG
exported from Illustrator. Designated target for me is to add "hover" effect to it (it could be Zomm effect or color changing), but at the end file will be uploaded into company's intranet site which is running on Sharepoint. I've made it with CSS but internal template is cutting whole css part/code.
As i know it's possible to be done with Javascript...
Cany You help Me with that or provide an extewrnal link to start with (for amateurs ofc).
Thanks for any help...
If your internal template is cutting your custom CSS, then it's likely going to cut your custom JavaScript as well. To my knowledge, you cannot embed hover effects into an SVG. But if you have access to the HTML and CSS or JavaScript then start with the following and experiment.
So you need to have three files.
Your SVG
Your HTML
Your CSS
in your SVG, it's going to have some weird code like:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
copy that into your HTML, and add an id to the svg:
<div class="svg-wrapper">
<svg id="mySVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
</div>
and something like this in your CSS:
#mySVG {
width: 200px;
height: 300px;
}
#mySVG:hover {
width: 250px;
height: 375px;
fill: blue;
}
if you do decide to do JavaScript instead of CSS, it will look something like:
document.getElementById("mySVG").addEventListener("mouseover", function () {
event.target.style.fill="blue";
});
Try this tutorial for using SVG: https://css-tricks.com/using-svg/
Try this tutorial for JavaScript hover events: https://www.w3schools.com/jsref/event_onmouseover.asp
You can achieve hover effects using SVG's built in SMIL animation feature. Sharepoint presumably won't strip that.
<svg>
<circle cx="150" cy="75" r="50" fill="red">
<set attributeName="fill" to="green" begin="mouseover" end="mouseout"/>
</circle>
</svg>
Note that this won't work in IE though. Which might be a problem if you are a big MS workplace :)
This html+svg page (no javascript) does not work on IE+Firefox, while it works on all other browsers (Chrome, Safari and Opera).
<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="graphics" style="overflow: hidden; position: relative;">
<defs>
<pattern id="A" patternUnits="objectBoundingBox" width="80" height="27">
<image xlink:href="Data/Dialoghi/tl/PN.3000994/A/1.png" width="80" height="27"></image>
</pattern>
... 7 more patterns
</defs>
<path fill="url(#A)" d="M31.20418,1.17813L39.54938,1.17813L39.54938,81.79142999999999L11.964579999999998,81.79142999999999C13.448279999999999,68.15012999999999,16.862979999999997,54.26062999999999,21.96358,41.51922999999999C26.683880000000002,28.519329999999993,29.80658,14.937729999999995,31.20418,1.178129999999996Z"></path>
... 150 more paths or rects
The page works everywhere only if I keep the number of figures below 30-40; at some point after that, it stops rendering the page at all, showing only white space on IE 10 and crashing Firefox (all other browsers work great).
What do I miss? How do you debug a case like this?
Thank you very much.
You've specified patternUnits="objectBoundingBox" so a value of 1 for width and height is the size of the shape. So you're creating patterns that are 80 or so times the size of the shape that you're drawing the pattern into like creating a pattern the size of Britain in order to draw London.
Either make the pattern width and height sensible (i.e. <= 1) or use userSpaceOnUse units
I am actually facing a strange issue with SVG and CSS3 transition property.
I have a simple SVG :
<svg version="1.1" class="world" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 200">
<g id="US East" class="interesting">
<polyline points="(...)"/>
</g>
</svg>
With this Sass/Compass style:
.world {
display: block;
width:250px;
height: 200px;
}
.world .interesting {
fill: #759a41;
#include transition-property(fill);
#include transition-duration(0.3s);
}
.world .interesting:hover {
fill: #aee265;
cursor: pointer;
}
It is working like a charm. Until I had a SVG link <a xlink:href="#">(...)</a>. It suddenly breaks the transition animation, and I can't figure it out why.
In action : a link mess it up! (CodePen)
This guy seems to have a solution, but I can't find the difference with mine: http://f.cl.ly/items/3r2J2B0j470U0I3t2K3p/logo.svg
Any idea?
EDIT: It is Chrome issue on some specific url. Works well in Safari.
I can't say that I have a technical explanation for what's happening here, but after having the same exact problem, doing some extensive researching, and playing with the codepens referenced above, it looks like there is a difference between using "http://" and "https://" in your xlink:href attribute.
This will allow the CSS3 transition to work perfectly:
xlink:href="https://www.w3.org"
This will cause the transition to break:
xlink:href="http://www.w3.org"
Both links will take you to the same website. Very strange, but it worked for me.
I'd like to set a default background color for the entire SVG document, to red for example.
<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>
The solution above works but the background property of the style attribute is unfortunately not a standard one : http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties, and so it gets removed during the cleaning process with SVG Cleaner.
Is there another way to declare this background color?
SVG 1.2 Tiny has viewport-fill I'm not sure how widely implemented this property is though as most browsers are targetting SVG 1.1 at this time. Opera implements it FWIW.
A more cross-browser solution currently would be to stick a <rect> element with width and height of 100% and fill="red" as the first child of the <svg> element, for example:
<rect width="100%" height="100%" fill="red"/>
Found this works in Safari. SVG only colors in with background-color where an element's bounding box covers. So, give it a border (stroke) with a zero pixel boundary. It fills in the whole thing for you with your background-color.
<svg style='stroke-width: 0px; background-color: blue;'> </svg>
It is the answer of #Robert Longson, now with code (there was originally no code, it was added later):
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
</svg>
This answer uses:
https://stackoverflow.com/a/11293812/6747994
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
Let me report a very simple solution I found, that is not written in previous answers. I also wanted to set background in an SVG, but I also want that this works in a standalone SVG file.
Well, this solution is really simple, in fact SVG supports style tags, so you can do something like
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
<style>svg { background-color: red; }</style>
<text>hello</text>
</svg>
I'm currently working on a file like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 600 600">
...
And I tried to put this into style.css:
svg {
background: #bf1f1f;
}
It's working on Chromium and Firefox, but I don't think that it's a good practice. EyeOfGnome image viewer doesn't render it, and Inkscape uses a special namespace to store such a background:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
version="1.1"
...
<sodipodi:namedview
pagecolor="#480000" ... >
Well, it seems that SVG root element is not part of paintable elements in SVG recommandations.
So I'd suggest to use the "rect" solution provided by Robert Longson because I guess that it is not a simple "hack". It seems to be the standard way to set a background with SVG.
background and background-color are not widely supported
the shortest code without is to draw a circle with a radius of 10000, this does also work for width-height-aspect-ratios different to viewBox.
<circle r="1e5" fill="red"/>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="1e5" fill="red"/>
</svg>
Another workaround might be to use <div> of the same size to wrap the <svg>. After that, you will be able to apply "background-color", and "background-image" that will affect thesvg.
<div class="background">
<svg></svg>
</div>
<style type="text/css">
.background{
background-color: black;
/*background-image: */
}
</style>