Discuss the articles posted on Dev.Opera.
By jorunnix 
Monday, 16. October 2006, 15:55:24
SVG: Evolution, not revolution
Jeff Schiller takes an HTML photo gallery and turns it into SVG in this first article in a three-part series exploring how to integrate SVG into your DHTML applications.
( Read the article )
By dantesoft 
Thursday, 2. November 2006, 06:49:18
Nice
Also, I like the presentation of the article. Would it be possible to make the article content available for download ? It would be a nice formatting starting point (fonts, paged content, embedded code, etc.) for an article I plan to write.
PS: There's an image on the first page, before "Our Sample HTML Application" with no URL: "<img class="left" />"
Post edited Thursday, 2. November 2006, 06:55:10
By willosof 
Thursday, 2. November 2006, 09:52:16
Originally posted by dantesoft:
PS: There's an image on the first page, before "Our Sample HTML Application" with no URL: "<img class="left" />"
Thanks! It was the parser, not the article. Just fixed the bug
Thanks!
By robodesign Thursday, 2. November 2006, 10:22:53
Hello!
Great article! Congratulations to the author.
However, I found several problems. Some of them also affected my tutorial (yesterday).
The second page, the paragraph before the first example says:
These types of objects can be styled, transformed, decorated, animated and made interactive in various ways. Here is a simple SVG document that displays a circle and a rectangle:
The link is broken.
Also, the first example on the same page does not need the XML namespace declaration for xlink (it's not used).
There's no explicit explanation of the XML namespaces used.
Another problem: page 2, chapter "Integrating SVG with HTML":
Here is a simple example.
That's another broken link, found in the last sentence in the first pagraph (right before the first example code).
You can put any HTML content inside the <object> as your fallback content.
Notice that's a broken HTML entity, found in the first sentence, last paragraph of the same chapter, same page.
Regarding fall back content, I wouldn't encourage web developers with examples that remind us of NOFRAMES and NOSCRIPT, in which actually there's no fall back content. The majority of web developers just display an useless "your browser does not support ...". I would recommend to provide real fall back, with an alternative content. In your tutorial you have done this: you provide as a fall back the IMG, but this is not emphased.
I'm looking forward for the second part, because the point we reach in the first part is just an equivalent document using SVG.
By jeff_schiller Thursday, 2. November 2006, 20:24:12
Thanks for the compliments, folks. I appreciate the efforts of dev.opera.com in editing this article and grabbing all the right files, etc. I noticed that when I was on page 3, Figure 2 didn't show up (also its fallback content of the PNG image is missing) but when I refreshed, Figure 2 was magically present.
@robodesign: I appreciate your comments - I believe most (if not all) of the link problems are fixed. As for the suggestions - I agree with most of them in terms of emphasizing or expanding on a couple points.
Now on to finishing up Part 2 of this series ...
By jax Friday, 3. November 2006, 00:27:47
Yes, there have been some glitches, for which the author is not to blame, so thank you for the proof-reading, it has been very helpful.
It is a sorry fact is that the potentially useful fallback mechanism of elements like 'object' element rarely is used for its purpose, but rather to add insult to injury: Not only are you deprieved of a fallback that would be useful when the primary choice is unavailable to you, you get told off by the designer for not using that exact setup he would prefer you to use.
Doing fallback right isn't always so easy, it is probably worth an article of its own.
By robodesign Friday, 3. November 2006, 09:47:24
Originally posted by jax:
Yes, there have been some glitches, for which the author is not to blame, so thank you for the proof-reading, it has been very helpful.
It was not my intent to blame anyone. I have pointed out the glitches for the precise reason to help Dev.Opera improve. This kind of comments, IMHO, are helping improve the site, instead of simple "great site"/"really bad site".
This sort of glitches also affected my tutorial at release, so I know
.
I'm glad you found my feedback helpful. Thanks
.
Originally posted by jax:
It is a sorry fact is that the potentially useful fallback mechanism of elements like 'object' element rarely is used for its purpose, but rather to add insult to injury: Not only are you deprieved of a fallback that would be useful when the primary choice is unavailable to you, you get told off by the designer for not using that exact setup he would prefer you to use.
Doing fallback right isn't always so easy, it is probably worth an article of its own.
Exactly my point.
Important to note, is that I find the article very good - no problems at all. I was just providing a suggestion
.
By johnnysaucepn Saturday, 4. November 2006, 01:22:24
Originally posted by robodesign:
It was not my intent to blame anyone.
I think this is one of these phrases that is easy to misinterpret! Usually 'not to blame' means that there is no blame that can be placed, either received or given. I'm sure this is what jax meant!
By François Parmentier Wednesday, 8. November 2006, 09:40:00
I found a strange behaviour for the SVG document on page 3 (figure 2): viewing it with Firefox 2.0, the whole document is not shown, there are sliders...
Although, it works in Opera.
You used <object type="image/svg+xml" data="gallery-scripting.svg"></object>.
And the SVG source show
width="600"
height="300pt"
What would you do to make it nice in FF too?
(sorry for my poor english)
By jeff_schiller Friday, 10. November 2006, 19:33:00
Francois,
Thanks for the proofread. I have sent an email to Jonny (jax) but will duplicate the request here:
Jonny,
On page 3 of my article (http://dev.opera.com/articles/view/22/?page=3), can you please replace the following:
<object type="image/svg+xml" data="gallery-scripting.svg"></object>
With:
<object width="640" type="image/svg+xml" data="gallery-scripting.svg"><img alt="Figure 2" src="gallery-scripting.png" /></object>
Basically add the "width" attribute to the object and then add the fallback img element.
Thanks,
Jeff
By jax Monday, 13. November 2006, 15:35:07
Done.
There is another interesting aspect of 'object' fallback hidden in here. Opera 8, with its very limited SVG support, still supports SVG but in this case PNG would have been better. I believe at some point a q-like attribute was considered for 'object' and rejected (q is the quality property used in HTTP content-negotiation). Here it would have made a lot of sense, the PNG fallbacks are almost as good the the SVG ones (you can't zoom, and you can't select text like you can with SVG), but Opera 8's SVG implementation was inferior.
In other cases the fallback is considerably worse (the "Please use a modern browser." reference to the bad old days). Like Jeff I am a proponent of 'object' fallback, but it can't discern between the two cases where you have two objects of similar or identical functionality (e.g. SVG and Flash objects, though I don't think you can select text with Flash), and the one where the fallback isn't giving a best representation.
By jeff_schiller Wednesday, 15. November 2006, 16:17:57
Jonny,
It is a great idea - but unfortunately it never happened. Hopefully we won't have to live too much longer in this state of having sub-par SVG implementations, but with Microsoft not even yet in the game that's hard to say.
Anyway, I sent you updated zip files for this article and the next one. Hopefully that's why I'm seeing 404s this morning.
Thanks,
Jeff
By Jinpao22
Banned User
Sunday, 3. February 2008, 18:37:06
Originally posted by jorunnix:
Jeff Schiller takes an HTML photo gallery and turns it into SVG in this first article in a three-part series exploring how to integrate SVG into your DHTML applications.
( Read the article )
