Re: [whatwg] How to use SVG in HTML5?
On Thu, 24 Jan 2008 05:41:58 +0100, Eli Naeher [EMAIL PROTECTED] wrote: Could you elaborate on these barriers? I would really like to see inline SVG. http://annevankesteren.nl/2007/10/svg-html has a high-level overview. The main problem is how the HTML parser as defined by the HTML5 specification needs to be modified and what set of limitations do we impose on the syntax. I also notice that 3.3.3.6 mentions something related: Elements that are from namespaces other than the HTML namespace and that convey content but not metadata, are embedded content for the purposes of the content models defined in this specification. (For example, MathML, or SVG.) Is this section out-of-date? Or does it refer only to elements which have been loaded into the DOM by some means other than being included in the source (e.g. in accordance with 4.8.2, Page load processing model for XML files)? HTML 5 defines processing of HTML5, XHTML5, and documents created using DOM methods. Only the latter two can contain elements from other namespaces at this point. -- Anne van Kesteren http://annevankesteren.nl/ http://www.opera.com/
Re: [whatwg] How to use SVG in HTML5?
Charles McCathieNevile wrote: On Thu, 24 Jan 2008 04:19:37 +1100, Mathieu HENRI [EMAIL PROTECTED] wrote: James Graham wrote: David Gerard wrote: ... I'd like to be able to drop SVG images into an HTML page as easily as I can a JPEG or PNG. I read over the recently-released HTML5 draft and couldn't work out how I'd do this. What would the HTML to do this look like? What's the equivalent of IMG SRC=foo.jpg for foo.svg? In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). If you want to embed svg inline like you can with XHTML, that's not currently supported... Supporting img src=foo.svg is a requirement of SVG 1.1 [1] ... It is true that you can't use inline markup. As far as I know, img src=foo.svg is only supported in Opera 9.5 betas (maybe webkit nightlies, I forget). It's also bad HTML, since it lacks any kind of fallback. But you can use object data-foo.svg/object (again bad HTML, it should generally have some kind of fallback content - and a size). Unfortunately, of course, IE is still holding you back from doing it on the open web that simply :( object data=foo.svgobject data=foo.pngSmells like Lynx spirit./object/object cheers Chaals -- Mathieu 'p01' HENRI JavaScript developer, Opera Software ASA
Re: [whatwg] How to use SVG in HTML5?
Embedding SVG by reference (thought the img element) is well suited to HTML. SVG was designed for this as stated in Embedding by reference section here: http://www.w3.org/TR/SVG11/concepts.html#UsageOptions I tested Opera's support for SVG through the img element and it incorrectly clips the SVG image. The width and height attributes of the img element need to set the viewport for the SVG image and scale the SVG non-uniformly to fit the viewport. The advantages of using the img element to render SVG over the object element or inline SVG are: 1. Existing authoring tools and CMS can support SVG without major modifications. For example, most CMS that support image libraries are hard wired to generate the img element when an image is selected from an image library. 2. Using SVG through the img element is more accessible solution because existing assistive technologies support the alt attribute whereas support for the object fallback mechanism is limited and support for inline SVG is non-existent. Also, even though SVG supports title and desc elements which are meant to increase accessibility of SVG, most SVG documents do not use them. So having the alt attribute on the img element is more accessible solution than relying on title and desc inside SVG. Regards, -Vlad http://xhtml.com
Re: [whatwg] How to use SVG in HTML5?
Dnia 24-01-2008, Cz o godzinie 08:50 -0500, Vlad Alexander (xhtml.com) pisze: Embedding SVG by reference (thought the img element) is well suited to HTML. SVG was designed for this as stated in Embedding by reference section here: http://www.w3.org/TR/SVG11/concepts.html#UsageOptions This is a permission from SVG's side: the designer of SVG permits HTML content to use IMG for SVG if HTML allows it. It should not be viewed as an obligation imposed upon HTML though. I tested Opera's support for SVG through the img element and it incorrectly clips the SVG image. The width and height attributes of the img element need to set the viewport for the SVG image and scale the SVG non-uniformly to fit the viewport. The advantages of using the img element to render SVG over the object element or inline SVG are: 1. Existing authoring tools and CMS can support SVG without major modifications. For example, most CMS that support image libraries are hard wired to generate the img element when an image is selected from an image library. They are all wrong (non-compliant). There are two ways to embed an image for all those Internet Explorer users to view: 1. Ask QuickTime to display the image as an object (first time requires administrator privileges) 2. Make it a background image of a suitably sized empty container. It is somewhat hard to make the container be displayed in-line but images for the sake of themselves rarely need such display. As a side effect, the right click download is disabled, which is something many publishers are after. 2. Using SVG through the img element is more accessible solution because existing assistive technologies support the alt attribute whereas support for the object fallback mechanism is limited Limited to what? and support for inline SVG is non-existent. And rightfully so. Also, even though SVG supports title and desc elements which are meant to increase accessibility of SVG, most SVG documents do not use them. So having the alt attribute on the img element is more accessible solution than relying on title and desc inside SVG. I parrot: Most HTML documents do not have it or have some nonsense in it. Which of course is no more an argument than yours, i.e. nil. Regards, Chris
Re: [whatwg] How to use SVG in HTML5?
Dnia 23-01-2008, Śr o godzinie 14:44 -0500, Sam Ruby pisze: On Jan 23, 2008 2:13 PM, Krzysztof Żelechowski [EMAIL PROTECTED] wrote: SVG is too heavyweight for the purpose of such tiny presentational enhancements. I can provide counterexamples: http://intertwingly.net/blog/ http://intertwingly.net/blog/archives/ - Sam Ruby All right, I hereby grant you the right to use in-line SVG provided the only element used inside is solid filled path. (No gradients, transformations, mitres, text and such). I remember using VML in this spirit myself. Thanks for the redirection, the pictures are very nice! Chris
Re: [whatwg] How to use SVG in HTML5?
Dnia 24-01-2008, Cz o godzinie 07:34 +1100, Charles McCathieNevile pisze: On Thu, 24 Jan 2008 06:44:59 +1100, Sam Ruby [EMAIL PROTECTED] wrote: On Jan 23, 2008 2:13 PM, Krzysztof Żelechowski [EMAIL PROTECTED] wrote: SVG is too heavyweight for the purpose of such tiny presentational enhancements. I can provide counterexamples: http://intertwingly.net/blog/ http://intertwingly.net/blog/archives/ An image is not a replacement for text in the real world, only in Ian's current drafts. Ian never said say that about images in general but about image elements. And your reply is not related to the examples: they do NOT use IMG (correct). Chris
Re: [whatwg] How to use SVG in HTML5?
On 24/01/2008, Krzysztof Żelechowski [EMAIL PROTECTED] wrote: I hereby grant you the right to use in-line SVG provided the only element used inside is solid filled path. (No gradients, transformations, mitres, text and such). I remember using VML in this spirit myself. Thanks for the redirection, the pictures are very nice! This is a good example of why people will want to use SVGs just like any other sort of image: * vector drawing is the right way to do lots of sorts of image * SVG is a standard and increasingly widely-used vector format * Inkscape's a reasonably usable and free vector drawing application that saves in SVG (of a sort) That it's arguably problematic won't stop people from wanting to do it, any more than tag soup being a parsing nightmare will stop people from doing the tagsoup-render-tagsoup-render-looks-ok method of HTML writing. And on a hostile Internet, user agents have to be able to cope well with arbitrary rubbish which may well be malicious, not just badly-formed; I don't see that safely parsing SVG is an intrinsically trickier problem than criminal spammers throwing every piece of toxic waste they can come up with at your user agent. [Inkscape is so prevalent for SVG drawing that Wikimedia has seriously considered using Inkscape in command-line mode as the default SVG renderer rather than rsvg, even if it is half the speed and uses a bucketload more memory. A user agent that handles SVG will likely need to be able to cope with almost anything Inkscape throws at it.] - d.
Re: [whatwg] How to use SVG in HTML5?
David Gerard wrote: Forgive me if this is a simple and obvious question. I note that all current browsers (except IE, of course) implement SVG rendering (to a better or worse degree). I'd like to be able to drop SVG images into an HTML page as easily as I can a JPEG or PNG. I read over the recently-released HTML5 draft and couldn't work out how I'd do this. What would the HTML to do this look like? What's the equivalent of IMG SRC=foo.jpg for foo.svg? In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). If you want to embed svg inline like you can with XHTML, that's not currently supported, although several people have expressed an interest in changing that. However there are significant technical barriers to overcome at the syntax/parser level. -- Eternity's a terrible thought. I mean, where's it all going to end? -- Tom Stoppard, Rosencrantz and Guildenstern are Dead
Re: [whatwg] How to use SVG in HTML5?
On 23/01/2008, James Graham [EMAIL PROTECTED] wrote: In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). img src=foo.svg is just what I was hoping for, thank you :-) Doesn't yet seem to work in Safari 3.0.4, SeaMonkey 1.1.7 or Minefield (Firefox 3 nightly) 2008012304 on Windows, though. Are there browsers it currently does work in? - d.
Re: [whatwg] How to use SVG in HTML5?
David Gerard wrote: On 23/01/2008, James Graham [EMAIL PROTECTED] wrote: In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). img src=foo.svg is just what I was hoping for, thank you :-) Doesn't yet seem to work in Safari 3.0.4, SeaMonkey 1.1.7 or Minefield (Firefox 3 nightly) 2008012304 on Windows, though. Are there browsers it currently does work in? I believe it works in Opera's preview builds. http://my.opera.com/desktopteam/blog/ First publicly announced on the 12th October It is now possible to use an SVG image in an IMG element as well as specify one as a background image in CSS http://my.opera.com/desktopteam/blog/2007/10/12/neat-thumbnails-instant-searching-and-more
Re: [whatwg] How to use SVG in HTML5?
On 23/01/2008, Anne van Kesteren [EMAIL PROTECTED] wrote: On Wed, 23 Jan 2008 15:55:27 +0100, David Gerard [EMAIL PROTECTED] wrote: img src=foo.svg is just what I was hoping for, thank you :-) Doesn't yet seem to work in Safari 3.0.4, SeaMonkey 1.1.7 or Minefield (Firefox 3 nightly) 2008012304 on Windows, though. Are there browsers it currently does work in? Should work in Opera 9.5 (beta though). If you use object data=foo.svg/object it probably works in more browsers. Works somewhat in SeaMonkey (gives default specified rendering size of image in a small object box with scroll bars) and Safari (gives default size in small box with no scroll bars, i.e. top left corner only) and best in Minefield (scales image to size of object box, scales properly with WIDTH= or HEIGHT=). (Minefield uses 100% CPU just displaying my test image, but also renders the SVG most accurately of any of them - this image was drawn in Omnigraffle but is known to misrender in Firefox, SeaMonkey, Safari, ImageMagick, Inkscape and rsvg - proprietary, or I'd link a copy. I expect I should create a test case and file a lot of bugs ...) Thank you all! - d.
Re: [whatwg] How to use SVG in HTML5?
On Jan 23, 2008, at 9:55 AM, David Gerard wrote: On 23/01/2008, James Graham [EMAIL PROTECTED] wrote: In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). img src=foo.svg is just what I was hoping for, thank you :-) Doesn't yet seem to work in Safari 3.0.4, SeaMonkey 1.1.7 or Minefield (Firefox 3 nightly) 2008012304 on Windows, though. Are there browsers it currently does work in? This should also work in WebKit nightly builds (available from http://nightly.webkit.org/ ). -Adam
Re: [whatwg] How to use SVG in HTML5?
On 23/01/2008, David Gerard [EMAIL PROTECTED] wrote: Works somewhat in SeaMonkey (gives default specified rendering size of image in a small object box with scroll bars) and Safari (gives default size in small box with no scroll bars, i.e. top left corner only) and best in Minefield (scales image to size of object box, scales properly with WIDTH= or HEIGHT=). Oh, and Opera 9.50 beta build 9745 for Win32 renders it in a box with scroll bars, and does by far the worst rendering of the original SVG I've seen ... (Minefield uses 100% CPU just displaying my test image, but also renders the SVG most accurately of any of them - this image was drawn in Omnigraffle but is known to misrender in Firefox, SeaMonkey, Safari, ImageMagick, Inkscape and rsvg - proprietary, or I'd link a copy. I expect I should create a test case and file a lot of bugs ...) I shall definitely create a public test case, so as to help Firefox 3 and Opera 9.5 do a good job! - d.
Re: [whatwg] How to use SVG in HTML5?
James Graham wrote: David Gerard wrote: Forgive me if this is a simple and obvious question. I note that all current browsers (except IE, of course) implement SVG rendering (to a better or worse degree). I'd like to be able to drop SVG images into an HTML page as easily as I can a JPEG or PNG. I read over the recently-released HTML5 draft and couldn't work out how I'd do this. What would the HTML to do this look like? What's the equivalent of IMG SRC=foo.jpg for foo.svg? In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). If you want to embed svg inline like you can with XHTML, that's not currently supported, although several people have expressed an interest in changing that. However there are significant technical barriers to overcome at the syntax/parser level. Supporting img src=foo.svg is a requirement of SVG 1.1 [1] If the user agent includes an HTML or XHTML viewing capability or can apply CSS/XSL styling properties to XML documents, then a Conforming SVG Viewer *must* support resources of MIME type image/svg+xml wherever raster image external resources can be used, such as in the HTML or XHTML 'img' element and in CSS/XSL properties that can refer to raster image resources (e.g., 'background-image') [1] http://www.w3.org/TR/2003/REC-SVG11-20030114/conform.html#ConformingSVGViewers -- Mathieu 'p01' HENRI JavaScript developer, Opera Software ASA
Re: [whatwg] How to use SVG in HTML5?
Dnia 23-01-2008, Śr o godzinie 13:42 +, David Gerard pisze: Forgive me if this is a simple and obvious question. I note that all current browsers (except IE, of course) implement SVG rendering (to a better or worse degree). I'd like to be able to drop SVG images into an HTML page as easily as I can a JPEG or PNG. I read over the recently-released HTML5 draft and couldn't work out how I'd do this. What would the HTML to do this look like? What's the equivalent of IMG SRC=foo.jpg for foo.svg? There is none, and there should not be. An IMG element is a replacement for inline text that can be rendered at the viewer's option, an SVG element is an embedded object of its own. SVG is too heavyweight for the purpose of such tiny presentational enhancements. Chris
Re: [whatwg] How to use SVG in HTML5?
On Jan 23, 2008 2:13 PM, Krzysztof Żelechowski [EMAIL PROTECTED] wrote: SVG is too heavyweight for the purpose of such tiny presentational enhancements. I can provide counterexamples: http://intertwingly.net/blog/ http://intertwingly.net/blog/archives/ - Sam Ruby
Re: [whatwg] How to use SVG in HTML5?
On Thu, 24 Jan 2008 04:19:37 +1100, Mathieu HENRI [EMAIL PROTECTED] wrote: James Graham wrote: David Gerard wrote: ... I'd like to be able to drop SVG images into an HTML page as easily as I can a JPEG or PNG. I read over the recently-released HTML5 draft and couldn't work out how I'd do this. What would the HTML to do this look like? What's the equivalent of IMG SRC=foo.jpg for foo.svg? In browsers which support it img src=foo.svg will work (with certain limitations for security reasons). If you want to embed svg inline like you can with XHTML, that's not currently supported... Supporting img src=foo.svg is a requirement of SVG 1.1 [1] ... It is true that you can't use inline markup. As far as I know, img src=foo.svg is only supported in Opera 9.5 betas (maybe webkit nightlies, I forget). It's also bad HTML, since it lacks any kind of fallback. But you can use object data-foo.svg/object (again bad HTML, it should generally have some kind of fallback content - and a size). Unfortunately, of course, IE is still holding you back from doing it on the open web that simply :( cheers Chaals -- Charles McCathieNevile Opera Software, Standards Group je parle français -- hablo español -- jeg lærer norsk http://my.opera.com/chaals Try Opera 9.5: http://snapshot.opera.com
Re: [whatwg] How to use SVG in HTML5?
On Thu, 24 Jan 2008 06:44:59 +1100, Sam Ruby [EMAIL PROTECTED] wrote: On Jan 23, 2008 2:13 PM, Krzysztof Żelechowski [EMAIL PROTECTED] wrote: SVG is too heavyweight for the purpose of such tiny presentational enhancements. I can provide counterexamples: http://intertwingly.net/blog/ http://intertwingly.net/blog/archives/ An image is not a replacement for text in the real world, only in Ian's current drafts. And where it is, SVG is ideal for having beautifully styled selectable interactive text that is lightweight and easy to create (or heavyweight and bloated if you use something like inkscape, but still easy to create and easy to automagically optimise to something lightweight). Which is why I disagree thoroughly with Chris' assertion here. cheers Chaals -- Charles McCathieNevile Opera Software, Standards Group je parle français -- hablo español -- jeg lærer norsk http://my.opera.com/chaals Try Opera 9.5: http://snapshot.opera.com
Re: [whatwg] How to use SVG in HTML5?
On 23/01/2008, Charles McCathieNevile [EMAIL PROTECTED] wrote: An image is not a replacement for text in the real world, only in Ian's current drafts. And where it is, SVG is ideal for having beautifully styled selectable interactive text that is lightweight and easy to create (or heavyweight and bloated if you use something like inkscape, but still easy to create and easy to automagically optimise to something lightweight). Which is why I disagree thoroughly with Chris' assertion here. FWIW, my use case is to be able to create images in SVG and just use them as ... images, just like I do PNGs or JPEGs. It was also somewhat inspired by setting up rsvg for MediaWiki on our work intranet and wanting to hit it repeatedly with a hammer ... but relying on client-side SVG rendering will have to wait until Firefox 3 renders it not only correctly, but without pegging the processor just displaying ;-) I think Chris is incorrect in his assertion because clients can be presumed to have increasing amounts of rendering power available just to make pretty pictures. Every browser (except IE) *has* SVG rendering. Firefox 3 will have *accurate* SVG rendering. SVG is the Right Thing for so many situations. It's all looking promising to me so far. - d.
Re: [whatwg] How to use SVG in HTML5?
Dnia 23-01-2008, Śr o godzinie 20:42 +, David Gerard pisze: FWIW, my use case is to be able to create images in SVG and just use them as ... images, just like I do PNGs or JPEGs. It was also somewhat inspired by setting up rsvg for MediaWiki on our work intranet and wanting to hit it repeatedly with a hammer ... but relying on client-side SVG rendering will have to wait until Firefox 3 renders it not only correctly, but without pegging the processor just displaying ;-) I think Chris is incorrect in his assertion because clients can be presumed to have increasing amounts of rendering power available just to make pretty pictures. That does not necessarily mean that the owner of the rendering device would be happy to watch the user agent use that power for something inessential (battery life!). Besides, your paragraph 2 directly contradicts paragraph 1: the implementations are not mature. Every browser (except IE) *has* SVG rendering. And that means that, optimistically, one user in three will have a chance of viewing the content as you intended (unless your target audience is very specific). Firefox 3 will have *accurate* SVG rendering. SVG is the Right Thing for so many situations. It's all looking promising to me so far. While it is nice and comforting to have a promise, it is wise not to rely on it too much. Chris
Re: [whatwg] How to use SVG in HTML5?
On Jan 23, 2008 10:42 PM, David Gerard [EMAIL PROTECTED] wrote: I think Chris is incorrect in his assertion because clients can be presumed to have increasing amounts of rendering power available just to make pretty pictures. please don't assume this. an n800 or n810 does not have much processing power, and its user would prefer that the device's battery last longer. Rendering a tiny picture perfectly on the client side when it could have been rendered server side is not a polite thing to ask of a resource limited device. Every browser (except IE) *has* SVG rendering. That's not true. MicroB as shipped w/ OS 2008 on the N810 (and in OS 2008 for the N800) does not include SVG rendering. http://browser.garage.maemo.org/news/9/ (disclaimer: i wrote that page) AFAICT IE6 included an old version of Adobe's SVG plugin, and you can get Adobe's latest plug-in (3.03) if you like. Firefox 3 will have *accurate* SVG rendering. who's promising this? SVG is the Right Thing for so many situations. It's all looking promising to me so far.
Re: [whatwg] How to use SVG in HTML5?
On 23/01/2008, timeless [EMAIL PROTECTED] wrote: Every browser (except IE) *has* SVG rendering. That's not true. MicroB as shipped w/ OS 2008 on the N810 (and in OS Sorry, you're right. I was thinking only of the desktop. Bad move. Firefox 3 will have *accurate* SVG rendering. who's promising this? Read up the thread. I noted that Minefield's rendering is notably better than FF2's. (I've been exploring the world of SVG in far too much depth lately. All SVG renderers suck, but Minefield's suck is on the CPU-pegging side, not the rendering side.) - d.
