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
Related
I'm designing a website, and I have some vectors (colored vectors for landscape). I always had a concern about using SVG due to the browsers compatibility.
As we are in 2020, Is SVG fully supported now with all of its details in all browsers (web, mobile) ? or still working only for the basic vectors those don't have much details ?
Should I trust it for a website that will be used widely whether via web/mobile ? or better to stick with JPG / PNG ?
All browsers have excellent support for SVG. You should have no worries about using it.
However you may want to avoid relying on some of the new bleeding edge features of SVG 2.
SVG 2 has not been finalised yet, and browser support for some of the new features is mixed.
As a resume of this post, pretty much all the modern browsers support at least partially SVG. You should definitely use it for simple images, but it's not wide supported for animations for example.
Note that some small display issues can happen, even with images. More information about it on this page.
If I want a simple two color gradient background, would it be accurate to say that SVG would have more cross-browser support than HTML5?
I checked for Gradient support in old browsers in SVG and they all appear to support them. However, some real-world experience can help shed some light on the pros and cons of these two choices? There are some questions asked earlier but they do not address this specific case of a simple two-color gradient to be used as a background and comparison with HTML5 gradient support.
Also, I would like to know if the same SVG or CSS, whichever option is chosen, will work for all the major browsers or is there tweaking required to support different browsers. For emphasis, I repeat: I AM NOT LOOKING FOR ANY FANCY BACKGROUND, JUST A TWO-COLOR GRADIENT.
(An auxiliary optional question: Will SVG support eventually die in browsers given its lack of popularity?)
The only browser version with significant marketshare that supports SVG but not CSS3 gradients is Internet Explorer 9.
Pros of using SVG gradients
IE9 support
It's cleaner linking to an external SVG file rather than
using vendor prefixes for gradients
Cons of using SVG gradients
Causes an additional request unless you base64 encode it and embed it in the CSS file.
If you embed the base64 version of the gradient then it's difficult to modify.
Your concern for SVG's future is greatly exaggerated. There's plenty of interest in SVG given new high resolution displays ("retina") an it is used by major javascript data-viz and graphing libraries. If anything, the future actually looks brighter for SVG.
I personally use SVG gradients when I need IE9 support. I use Microsoft's SVG Gradient Generator and use the base64 version as to not cause an additional request. I haven't run into any issue at all, SVG gradients behave just like their CSS3 counterparts.
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.
I'm trying to place html elements over a flash video which must be rendered with wmode="direct" (video occupies entire window with html UI to be laid over it, anything other than direct makes CPU usage surge).
I've tried using an iframe to include the flash video, but I'm still unable to place any elements over it. Is there a workaround to achieve this?
According to Adobe's wmode browser support matrix, all major browsers at current versions on Mac already support this use case. On Windows support is spotty, only IE 9+ is claimed to work.
Like you, I'm trying to find out if/when Adobe plans to extend HTML overlay support for wmode=direct in Windows browsers. The linked page only talks about Chrome up to 10 and FF up to 4, so more progress may have already been made since the doc was last updated.
If I find out something useful I'll add it to this answer, until then it's probably safest to assume you need IE 9+ on Windows to support direct+overlay.
We are finding that most browsers support HTML overlay when wmode="direct" - however no browser is able to support transparency overlayed on top of the flash. Not even PNGs can alpha blend correctly. Any pixels that have an alpha channel and ignore as if there was no pixel at all.
When creating UI to layer over the top of flashs we have to "blanket out" the SWF - or - use rectangular DOM elements (ie, no rounded corners)
Furthermore - IE 9 on Windows 7 and older version simply fail to overlay anything over the flash. Iframes seem to pierce the SWF, but HTML elements do not.
I want to apply wmode=direct to flash objects on my page.
What are the behaviour it will accomplish in older browsers (IE6,IE7,etc.)?
Or the older versions of Flash Player?
Does the parameter behave as default(window) or transparent?
The documentation doesn't explicitly say, but as per Flash OBJECT and EMBED tag attributes:
Explicit layering control is only supported with some modern browsers (see table below). In other browsers, the SWF content always appears above other HTML elements.
This sounds like opaque:
The SWF file is opaque and hides everything layered behind it on the page