Any point using SVG Web, if not supporting IE7 and 8? - cross-browser

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.

Related

Using SVG for Vectors and its compatibility with the browsers

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.

Flash embed with html overlay, wmode="direct"

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.

"wmode=direct" Behavior In Older Browsers And Flash Versions

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

Is there a standard for rendering vectorized graphics on web sites?

It seems that w3c supports the svg file format, however not all browsers support it yet. Are there currently any viable options to include vectorized graphics on a website?
SVG is the way to go, but you may need to use some additional plugins to ensure wider compatibility. To be clear, all modern browsers support it, but there are notable 'previous-gen' browsers that don't (ok, just IE & early Android).
Consider SVGWeb, which will allow you to create a cross-platform SVG embed. I don't totally agree with their methodology (falling back to a Flash renderer if no native support is detected), but it allows you to embed SVG files, unlike RaphaelJS.
The alternative is to user a server-based renderer like Batik, but my experience with Batik is that it is slow as a dog... fine if you have everything cached, but if you need dynamic scaling or things of that nature, you're better off with SVG proper.
SVG is really the only widely supported vector format, but you're right that it's not ubiquitous. The most popular option is to use a layer on top of SVG like Raphaƫl. It's compatible with any browser you're likely to encounter nowadays.

Displaying SVG in HTML

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