Comments on: View Source Tutorial: Fancy Web Page Using HTML5, CSS, and SVG

By: ginje

ginje — Tue, 20 Oct 2009 10:49:20 +0000

The site looks GREAT in Firefox. Unfortunately in my Opera 10 on Windows Vista browser, all I get is the gradient background and NOTHING else.

I realise it’s early days but will HTML5 be subject to the same old browser incompatibilities as previous versions I wonder…?

By: joaquinWin

joaquinWin — Thu, 08 Oct 2009 21:48:45 +0000

The way the fallback website is made is not the most optimal, The message “Usually there’s a nifty page here with a big download button. But you are using a browser which doesn’t support SVG and so you get the boring looking page.” is there in the code and can be read by anyone (screen readers, searc engine bots….)

Is there a way in the specification to define alternative content for browsers that do not support SVG? also tab navigation is not really usable (at least in Firefox).

By: HelderMagalhaes

HelderMagalhaes — Thu, 08 Oct 2009 15:53:33 +0000

I’ve rambled a bit on this site about a month ago (although I’ve only published the entry today):
http://heldermagalhaes.com/blog/2009/08/emacs-triggers-svg-bugs/

@codedread
Did you meant “While Opera and Webkit support this”? ;-)

By: codedread

codedread — Thu, 08 Oct 2009 14:30:06 +0000

@andriijas – there is a way to do this, use CSS background-image using a SVG file. While Opera and Firefox support this, unfortunately Firefox does not yet.

By: andriijas

andriijas — Thu, 08 Oct 2009 07:51:47 +0000

So you guys are saying there’s no way to make an external svg with some gradient and use as a css background on the body on multiple pages?

Or lets say i make a rounded corner box with a gradient background svg, do i really need to include it on all html pages using it instead of using it as css background?! :S

By: rdza

rdza — Thu, 08 Oct 2009 02:59:25 +0000

Hey Brad, thanks for the great new feature!
Could svgweb be used to render the svg content in an IE+flash environment, and if so, how would that work?

By: Brad Neuberg

Brad Neuberg — Thu, 08 Oct 2009 00:00:07 +0000

You can simply use the OBJECT tag to embed external SVG if you don’t want it directly in your page.

By: SilentLennie

SilentLennie — Wed, 07 Oct 2009 20:57:04 +0000

@jnbdz what about these methodes:

http://benjamin.smedbergs.us/blog/2008-12-22/using-svg-on-the-web/

You can even use object with parameters.

By: jnbdz

jnbdz — Wed, 07 Oct 2009 18:46:28 +0000

I agree with @andriijas how do you add a external svg. I know that on Safari you can use img element, but not on Firefox… So how I am supposed to do it?

By: andriijas

andriijas — Wed, 07 Oct 2009 17:32:43 +0000

@eyelidlessness well if you have a site with 10 pages and all of them uses the same svg elements to build up the site design id say its better to make the user download them only once and cache it in the users browsers to that when he loads the second page he only needs to download the html and the svg is taken from the cache.

By: eyelidlessness

eyelidlessness — Wed, 07 Oct 2009 17:25:11 +0000

andriijas, the practical implications of embedding SVG directly in the page (or embedding data: URLs or whatever) depends entirely on your caching scheme. If you set cache headers for your dynamic pages the way you set them for static content (as in, your dynamic content is not updated constantly), then embedding has a performance benefit in that it produces fewer HTTP requests; if not, embedding has a higher cost in that it requires more information down the pipe on each load. Obviously this depends a lot on your content and your caching system generally, and grows more complex the more complex your system grows.

And… Ajaxian site owners, can you guys please find a better CAPTCHA system that doesn’t flag me as “spam” even when I answer the fucking question correctly? It asked me what the X in Ajax stands for, I put “xml” in the field, and my comment was flagged. Whatever heuristics are being used besides the field are obviously too zealous if a post with a correct response, no links and obviously parsable as something other than a stream of keywords and misspellings, from a registered user who doesn’t even have a URL in the profile field…. gets flagged.

I’ve had a lot of problems with this site’s usability, but most I’ve fixed with local CSS modifications; but I can’t fix this locally, and it happens pretty often.

By: andriijas

andriijas — Wed, 07 Oct 2009 16:55:29 +0000

@RoryH yeah on that emacs site yes but clearly you didnt read my message since i were refering to what if larger sites were to use svg…

By: tj111

tj111 — Wed, 07 Oct 2009 16:37:33 +0000

Liking the new feature guys!

By: reaktivo

reaktivo — Wed, 07 Oct 2009 16:28:38 +0000

@andriijas, probably because if it only going to be used in one page, making multiple requests for different files is a lot slower.

By: RoryH

RoryH — Wed, 07 Oct 2009 13:09:37 +0000

Loving the 1990′s fallback page for IE… this is the way the web should be for non-embracing IE

By: andriijas

andriijas — Wed, 07 Oct 2009 12:29:35 +0000

Why embed all svg in the actual html? In todays frontend development best practices we are encouraged to make sprites, set far future expire headers on images etc. Lets say a huge site were about to use svg, facebook for example. If the users where to download the same svg over and over again, wouldnt that increase their bandwidth dramaticly?

Is it possible with html5 to use “external svg” or is it recommended to embedd?

By: totoloco

totoloco — Wed, 07 Oct 2009 12:03:50 +0000

You can try:
http://code.google.com/p/macvim/

vim rocks!

By: zgrossbart

zgrossbart — Wed, 07 Oct 2009 11:45:52 +0000

The page looks spiffy in Firefox and Chrome, but a little less so in IE. The difference is night and day. These types of differences still make me a little wary of using SVG for commercial sites.