Is there a good library for converting SVG to HTML canvas that supports the font element? I have already tried canvg, but it does not support Font.
Browsers that support HTML5 Canvas also support SVG pretty well themselves. As such, you could do this:
var img = new Image;
img.onload = function(){ myCanvasContext.drawImage(img,0,0); };
img.src = "foo.svg";
The only downside to this technique is that if the SVG is outside of your domain the canvas will become tainted; you will not be able to use getImageData() to read the resulting SVG, if that is your goal.
I've put an example of this technique on my server: http://phrogz.net/tmp/canvas_from_svg.html
I've tested this and verified that it works (and looks the same) on IE9, Chrome v11b, Safari v5, and Firefox v4.
[Edit] Note that:
Chrome and Firefox currently 'punt' on security and disallow you from reading the canvas (e.g. getImageData() or toDataURL()) after you draw any SVG to the canvas (regardless of the domain) these have been fixed
Firefox currently has a bug where it refuses to draw SVG to the canvas unless the SVG has height and width attributes specified.
In case you have the svg embedded into HTML or as a raw source you can use a data URL to convert the svg to a HTML image element which you then can draw on the canvas:
var img = new Image();
// here attach an onload handler that draws the image on the canvas
// svgSource is the raw svg xml
img.src = "data:image/svg+xml," + encodeURIComponent(svgSource);
I just tried a simple img tag, Phrogs' method and canvg. My SVG has an embedded PNG. That only worked in canvg. The others showed the image without the embedded PNG. That was on Android Jellybean with either the standard browser or Chrome.
Related
I have just added an SVG image to my personal website for the logo but when I view the image on my mobile device it's displaying, but in a different font. That's my problem. How do I fix this?
The way I am adding the SVG is as I would a normal image.
<img src="images/logo.svg">
I have a feeling this is not the correct way to add SVG images, I also have no fallback for browsers that do not support SVG so if anyone could offer advice on how to do that, that would be great.
Thanks
If you create .svg from Ilustrator (e.g), first, be sure to create outlines from your text object, then, export object to .svg file, wich will be read from any (modern) browser.
Displaying SVG images using <img> has quite good browser support nowadays: http://caniuse.com/#feat=svg-img so I personally would recommend it.
If you need to support very old browsers like IE8 or Android 2.3, I would use
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
to check for feature detection (source: https://css-tricks.com/test-support-svg-img/) and use a PNG file then (by replacing the src attribute of the <img>).
To include a custom font in a SVG, one can include it in the SVG's <def>:
<defs>
<style type="text/css">
#font-face {
font-family: 'Gunny Rewritten';
src: url('GunnyRewritten.woff');
}
</style>
</defs>
Can any one please give me some clarification on this:
I have to do some annotations on images like measurements, mark and text. Is this possible with SVG?
Do we need to install any external plugins to work with SVG in a web browser?
Will it be supported by mobile browsers?
what are the advantages of SVG over HTML5?
Question: I have to do some annotations on image like measurement,mark and text. How can it possible with svg?
Answer: This is possible using a combination of SVG, which when embedded in HTML becomes part of the DOM, and JavaScript to manipulate the SVG elements just as you would with any HTML element and JavaScript.
Question: Do we need to install any external plugins to work svg in a web browser?
Answer: No, most modern browsers render SVG.
Question: Will it support mobile browsers?
Answer: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#History_of_SVG_mobile_support
Question: what are the adventages of svg over Html5?
Answer: SVG is part of the DOM, which means it can be styled by CSS, manipulated with JavaScript, animated, etc.. Html5 Canvas is a JavaScript API which allows us to draw programatically. This means that SVG is nice for quick sleek graphics and can also be created with commercial or open-source SVG Editors. SVG can be animated or interacted with via JavaScript and styled via CSS. With the HTML5 Canvas you must use the JavaScript API to give life to your canvas. HTML 5 Canvas is higher difficulty curve, but can be much more robust than SVG (Chrome Experiment).
Is there any point in using SVG Web, if I render SVG only for browsers that support SVG anyway? (IE9, Chrome, Firefox, Opera.)
Perhaps SVG Web fixes/works-around some browser inconsistencies? (E.g. different SVG API:s or browser bugs, like jQuery does)
((Background: I already use SVG Web, and wonder if I should attempt to remove it from my webapp, it's 100k minified. For IE 7 and 8, I use PNG images instead.))
Not really.
AFAIK it doesn't do that, unless you force all browsers to use the flash renderer, which seems a bit pointless.
Has anyone got HTML5 canvas clipping (http://www.html5canvastutorials.com/tutorials/html5-canvas-clipping-region-tutorial/) work with explorercanvas (http://code.google.com/p/explorercanvas)?
I have an HTML5 page using clip() and to support older IE bowsers, I am using explorercanvas. But I couldn't get clipping region work on it. I am looking for a solution or workaround for this.
clip() does not work in explorercanvas (excanvas.js).
Issue Reference:http://code.google.com/p/explorercanvas/issues/detail?id=36
I have a web service that returns a string of svg code. My problem is, I'm not sure what to do with it. I've never worked with SVG before. My questions are:
Does SVG have strong support by common browsers?
How do I actually display the image that the SVG represents?
SVG is supported by nearly all major browsers except IE i think but that also can be rendered with some plugin. IE renders VML
I suggest using RaphaelJS http://raphaeljs.com/reference.html#image
EDIT :
var r = Raphael("holder", 600, 540); //"holder" is the id of an empty div in html file
r.image("lion.svg", 140, 140, 320, 240);// r.image(src,x,y,width,height)
Svg is a specification for XML. Most modern browsers can just display it inline, but Internet Explorer can't.
I recommend wrapping all your svg content in svgweb, which is a thin layer around the svg code. If the user is using a standard compliant browser, it will display the svg normally. Otherwise, it converts it into flash content.
Starting with HTML5, you can embed SVG directly in a HTML document. This is supported by all of the major modern browsers, except Internet Explorer. You can use the HTML canvas concept (as illustrated here )
But, since you most likely can't leave IE folks behind yet, you can go with one of the three legacy options shown here
Most state-of-the-art-browsers do support SVG,
but few still used browsers (for example Internet Explorer 7) fail.
So for perfect compatibility you should stick to gif, jpg or png formats.
Test your own browser here: http://alphanemoon.com/2008/artikel/inline-svg-browser-test.xhtml