<img width="80" height="90" src="/assets/images/shape.svg" />
I'm using a SVG inside a <img /> tag to display a shape with only a border.
On non-retina (left) the SVG image isn't sharp, but on retina it is (right):
I also tried putting the SVG image in a <object>, but the same pixel border appears.. (suggested in: Do I use <img>, <object>, or <embed> for SVG files?).
Anyone with an explanation or fix for this, please? :)
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>
Firefox's rendering of <image> elements is pixelated. The same image with the same width/height appears nicely as an <img>. It also works correctly as an svg <image> in Chrome.
Example:
The left portion is the svg <image> referencing a png, the right is a normal <img> referencing the same image.
Working example:
<svg height="53" width="60"
xmlns="http://www.w3.org/2000/svg">
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" width="60" height="53" x="0" y="0" />
</svg>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" width="60px" height="53px"/>
How do I make the svg image render properly? I've tried all the options listed here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image (image-rendering, shape-rendering, preserveAspectRatio, etc.).
This was caused by a bug, resolved in firefox 67.
https://bugzilla.mozilla.org/show_bug.cgi?id=1534188
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.
I have a PNG file with lots of icons on it. I want to use it in my SVG. I use the svg:image tag:
<image xlink:href="icons.png" height="50px" width="50px"></image>
This renders the whole image. How can I specify the portion of the file to be rendered? (I need an SVG-equivalent of CSS's background-position attribute)
Update
I suspect preserveAspectRatio attribute to be what I need, but can not figure out how to use it with <image>. See this example.
You can use preserveAspectRatio to achieve this affect in a limited way. But you are limited by the positioning options that preserveAspectRatio provides. So as long as your sprite has a maximum of 3x3 images or are positioned at the corners or sides, it would work.
The are a couple of other ways I can think of to achieve the same effect in a more flexible way.
Use the clip or clip-path style properties along with careful positioning of the image on the page
Embed the image inside another <svg> element and use viewBox to select the part of the sprite you want.
The following example demonstrates the three main techniques above.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 400 400" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Testing image elements</desc>
<!-- Outline the drawing area in blue -->
<rect fill="none" stroke="blue"
x="1" y="1" width="398" height="398"/>
<!-- Use preserveAspectRatio to show the top 64 pixels of the image (Stack Overflow logo) -->
<image x="100px" y="100px" width="238px" height="64px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png"
preserveAspectRatio="xMinYMin slice"/>
<!-- Use a CSS clip rectangle to show a small facebook logo from the sprite. Logo is at 150,1000 with dimensions 19x19.
Positioned at 100,200 in the SVG (-50+150, -800+1000). Could also use a clip-path for this. -->
<image x="-50px" y="-800px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png"
clip="rect(200 100 219 119)" />
<!-- Use a svg viewBox to show the facebook logo from the sprite.
By setting our viewBox to the bounds of the logo, the renderer will scale it to fit the specified width and height.
Which in this case is 19x19 - the same size as the sprite. -->
<svg x="100px" y="300px" width="19px" height="19px" viewBox="150 1000 19 19" version="1.1">
<image x="0px" y="0px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" />
</svg>
</svg>
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.