I want to embed some SVG into SVG.
Therefor I want to use the <image> element since I want to keep my SVG separated.
But when I include my SVG like that:
<image xlink:href="svgs/munitionsmangel.svg" width="20" height="20" x="120" y="70" />
It works, but does not scale the SVG up when I zoom with my browser, it just stays small.
But when I embed just the same SVG file as a symbol and include it like that:
<use xlink:href="#munitionsmangel" width="20" height="20" x="80" y="70" />
it just scales up like a charm.
What is the problem here?
Edit: Seems like this is a bug with Firefox, in the current version 21
Chrome scales up the image as well...
Even more strange, if I include a raster image with image, both Firefox and Chrome scale it...
Edit 2: Even IE 9 has the desired behaviour, although its rendering of background colors is a bit strange, so its only Firefox which sucks
Since this really seems like a bug in Firefox, I will use the <use />-tag instead, maybe in combination with XMLHttpRequest to insert the <symbol /> dynamically.
Or even only XMLHttpRequest with inserting the node directly.
I cannot think of a better solution, so if there is really a better answer, just post it!
Related
See reproduced example here - https://codepen.io/canovice/pen/eYRmYKR - command + P to print, I've taken this screenshot of the print/pdf output:
Problem: On web, both images are sharp. On print and save to PDF, the logo in the <img> tag remains sharp, whereas the logo in the <svg> using <svg:pattern>, <svg:image>, <svg:rect> with the fill attribute, is blurry.
Purpose: Our web app has many SVG graphs (think scatterplots) that use the team logos in place of the scatterplot dots. We want users to be able to print these graphs, and save these graphs to PDF, with sharp images. Here's a screenshot of the graph on web, with the sharp logos. When we save this as PDF, we get blurry logos.
We are using react.js and d3.js to build our web app and create our svg graphs, although we are hoping for a solution specific to the html & css of SVG elements.
Wrapping a raster graphic image inside a svg name does not make it a true scalable vector graphic. The method used is a "gradient fill with image" thus not as efficient as using true SVG objects with true colour gradient fills.
To get png in svg wrapping keep it simple
<div>
<svg width="2000" height="2000" >
<rect x="0" y="0" height="1000" width="1000" style="fill: #f0fff0"/>
<image x="30" y="00" width="160" height="160" xlink:href="103735.png" />
<image x="300" y="50" width="160" height="160" xlink:href="103735.png" />
</svg>
</div>
This is the example https://codesandbox.io/s/4xwv953mv0
There are three lines. The original one is hidden the second linked to it by id xlink:href="#line", the third links the second the same way.
Move the slider, the lines will go up in the Chrome, and only one will go up in the Firefox.
If it is a Firefox bug what to do? Is there a way to update SVG with Vue?
Yes. This is a known Firefox bug. Firefox bug report here and here.
There is a simple fix here though. Just change your second use so that it points to the <line> directly, rather than at the <use>.
<use
id="Svg"
xlink:href="#line"
transform="translate(40,10)"
></use>
As an aside. I recommend that you put your line in a <defs> section, rather than hiding it with display:none. This is what <defs> is for, and using display:none can have unintended consequences in some cases.
<defs>
<line
id="line"
x1="0"
y1="0"
x2="100"
:y2="value"
vector-effect="non-scaling-stroke"
/>
</defs>
I want image to be grayed in IE 9+ and when I hover mouse it show original
Everything is working fine but thing is that when I do hover it scales image
find code in below fiddle
Fiddle
The scaling is caused by your jpg being slightly larger (105×58) than your svg (96×53). When the jpg is referenced by <image> it is scaled to fit the dimensions of <image>. This works as expected for the grayed image, but fails for the hover effect. On hover you set opacity:0 for the <image> which renders the svg's background visible. The background image, however, is not scaled to fit the dimensions, but rather clipped to your svg's size. Hence the difference in scale.
To circumvent these problems I would prefer another approach getting rid of the background image. You could just place the original coloured image right underneath the grayed image. The grayed image will then obscure the coloured image until opacity is set to 0 on hover:
<image x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />
<image class="gray" filter="url('#filtersPicture')" x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />
Check the updated JSFiddle.
According to the SVG 1.2 standard, support is now offered for icc-color specfication (according to this link: W3.org spec for SVG 1.2
I tried it with the following... this is the entire file, two circles, both should be green
<?xml version="1.0"?>
<parent xmlns="http://example.org"
xmlns:svg="http://www.w3.org/2000/svg">
<svg:svg width="400" height="200" version="1.2">
<svg:ellipse cx="100" cy="100" rx="100" ry="100"
fill="rgb(0,255,0)" />
<svg:ellipse cx="300" cy="100" rx="100" ry="100"
fill="rgb(0,255,0) device-cmyk(0.11, 0.48, 0.83, 0.00)" />
</svg:svg>
</parent>
However, when I try to view it with IE9 or Chrome, the second circle is black. The only thing that renders both circles as green is GIMP 2 (of what I've tried so far).
The RGB is supposed to be the fallback color... does adding the CMYK part just mess it up so badly for a browser that it's unusable? Or am I doing something wrong?
If you look at the top of the document, you'll see SVG 1.2 is a working draft from 2009. It was never completed and no browser ever implemented it.
Anything I tried failed so far to get Firefox to underline some text.
According to Google-results this issue is known and documented for more than five years ... that just can't be true ... what is going on?
Someone knows any consitently working workaround or maybe even a reason as to why they didn't fix it yet!? ... I am very curious about that
Underlines on text in SVG, as well as other text decoration, is not supported in Firefox yet, that is true. (Bug 317196 attests to that.) There is a plan to rework the SVG text layout code over the next few months, the result of which should be (among other things) underlines working.
In the meantime, if you really need them (and cannot draw them manually with a <line>, because for example you don't know the text metrics), you could use a <foreignObject> to include some HTML content with underlines.
In my Firefox, a ForeignObject text within an SVG gets perfectly underlined if I include it in the right tags:
<html:u>blub</html:u>
... having declared html as a namespace in the svg, sample code looks like this:
<div style="border:solid black 2px;">
<svg:svg xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
width="300" height="50" >
<foreignObject width="80" height="50">
<html:u>blub</html:u>
</foreignObject>
</svg:svg>
</div>
Would that be a solution for you?