What's the difference between displaying a SVG image in an <img> or <object> tag? I was facing some problems using SVG images in a <img> tag on Android 3.1:
The shape in the upper example is an <img> tag and the lowest example is the exact same image but display in an <object>.
Why is this displayed a different way? And is an <object> cached like an <img>?
What do you guys suggest?
Differences when SVG is used as an image (html <img> SVG <image> or CSS background images)
no scripting
no interactivity
no external dependencies (complete in a single file)
no DOM (i.e. no script access into them from outside)
can be copied into canvas via drawImage
I suspect you're suffering from the no external dependencies rule. You may also want to check that the SVG data has a preserveAspectRatio attribute on the root element and if it does that the value of that attribute is not none.
Related
I'm using the brilliant dom-to-image to capture a screenshot of a d3.js dashboard and download as a png.
I've found it works better than it's competitors - the CSS transfers beautifully - but I've come across a stumbling block.
I have some SVG image elements in my dashboard:
<image x="20" y="20" width="300"height="80"
xlink:href="image/my_image.png"/>
These are either embedded directly onto the svg or as pattern definitions and they are not rendering on the PNG.
This is a know problem and one which has come up on Stack Overflow before but I haven't been able to find a solution. Any thoughts?
In order to get your svg converted to png. Just place your nodeRef in a div and inside that div let your d3.js component be written.Applying nodeRef directly over component will not work.
For me what worked was installing html-to-image and not using dom-to-image
I am using SVG inside React, but the amount of SVG tags that ReactJS allows is limited and I don't see a way to embed an <image/> SVG tag inside my JSX.
I've also tried using a fill style on a rect set to a url of an image, but it doesn't work either. Is there a workaround for this?
SVG Image is now supported in 0.14.
For prior versions, you can use dangerouslySetInnerHTML. For more about that, take a look at this issue:
https://github.com/facebook/react/issues/2069
The SVG logo on this site doesn't look sharp on every zoom level. I read once, that SVG is just sharp on a multiple of its original size. But when I rightclick on the graphic and display it alone (without an img tag around it), it looks sharp on every possible zoom. There is no width or height given to the image.
It appears that Firefox renders the SVG to an image when referenced via an <img> tag. Use an <object> tag
I believe the issue is in Firefox.
Try to set the image width to 100% and height to the actual height of the SVG and this will solve the issue.
For Instance.
img{width:100%;
height:xxpx; /* Where 'xx' is the value of the image height in pixels */
}
Hope this Helps.
I have some file written in SVG, I want my javascript code can convert the SVG to VML if it detect the user's browser is IE8,
Is it possible? Many thanks!
There are javascript libraries that will generate VML or SVG automatically depending on what the browser supports, but only if you use that library's methods for creating the svg.
Raphaël is probably the most well-known one.
Yes, svg2vml.js - http://code.google.com/p/svg2vml/
Works well for SVG images.
They are still working on adding svg DOM support for dynamic svg creation and manipulation programatically via js.
We need to view some very large (7200+ pixels) SVGs. Every SVG viewer I've found, including modern web browsers, does not allow us to view the entire image. There aren't any scrollbars, and we do not have the option to zoom.
Is an open source / free application available that could help with viewing the entire SVG image? Thanks!
If you really do mean SVG, Inkscape should work.
You need to add viewBox attribute to the <svg> element and wievers will scale the image to the available viewport.
<svg viewBox='0 0 7200 7200' ... >
You may want to try Opera SVG Viewer to preview multiple svg files at once.
If you use a custom css browser extension such as Stylus, you can set up a CSS style for overflow on the root element, which should be <svg>:
:root {
overflow:auto !important;
}
This is pretty harmless for any html page but you can have it only apply to .svg urls via the url regex filter:
^.*[.]svg$
Now with this in place, opening an svg in a new tab will apply the style and allow you to scroll around. Zooming in and out should automatically adjust scrollbars.