Re: SVG 1.2 Comment: Detailed last call comments (all chapters)

Ian,

> [Taken off www-svg since JonF requested that I not send non-SVG-related
> content to the www-svg list. cc'ing www-archive instead.]

Let's just say that you might not make as much of a fool of yourself on  
this list where no one is aware this thread continues. Well done.

> You wrote:
>> Can you elaborate on how <canvas> makes dynamic graphics generation
>> easier with a concrete example?

That's just code, not a detailed analysis about how <canvas> is a  
fitter contribution to web development than SVG for the creation of  
"dynamic stock graphs, maps, and the like". But hey, let's just look at  
your code.

> Sure.
>
> Say you wanted to draw a circle around a point on a photograph, as part
> of a Web page. Radius 10px, two pixel black stroke, no fill. In the
> examples below I've omitted the fallback content in both versions, in
> order to concentrate on the differences.

You sure didn't ignore the pedantic programming style to make sure your  
comparison was well-biased.

> With SVG, you would do somthing like:
>
>   <?xml-stylesheet href="doc.css"?>
>   <html xmlns="http://www.w3.org/1999/xhtml">
>    <!-- ... -->
>     <svg xmlns="http://www.w3.org/2000/svg" id="photo"
>          xmlns:xlink="http://www.w3.org/1999/xlink">
>      <!-- the photograph -->
>      <image width="100%" height="100%" xlink:href="photo.jpg"/>
>      <script type="text/javascript">
>       var svg = document.getElementById('photo');
>       function addCircle(x, y) {
>         var c = document.createElementNS('http://www.w3.org/2000/svg',  
> 'circle');
>          
> c.cx.baseVal.newValueSpecifiedUnits(c.cx.baseVal.SVG_LENGTH_PX, x);
>          
> c.cy.baseVal.newValueSpecifiedUnits(c.cy.baseVal.SVG_LENGTH_PX, y);
>         c.r.baseVal.newValueSpecifiedUnits(c.cy.baseVal.SVG_LENGTH_PX,  
> 10);
>         c.style.setProperty('fill', 'none');
>         c.style.setProperty('stroke', 'black');
>         c.style.setProperty('stroke-width', '2px');
>         svg.appendChild(c);
>       }
>      </script>
>     </svg>
>    <!-- ... -->
>    <!-- then later call addCircle(x, y); -->
>   </html>

First, strip off the <html> that you don't need in that case, and the  
stylesheet since we don't need it anymore (you can't position a circle  
using CSS in SVG). Then, for a quick task, write the appropriate code  
as is:

<svg xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" onload="addCircle(50, 50,  
10)">
   <image  
xlink:href="http://graougraou.com/Pictures/Albums/StigHelmer/ 
DSCN0807.sized.jpg" width="400" height="300" />
   <script type="text/javascript">
     function addCircle(x, y, r) {
       var c = document.createElementNS('http://www.w3.org/2000/svg',  
'circle');
       c.setAttributeNS(null, 'transform', 'translate(' + (x-r) + ',' +  
(y-r) + ')');
       c.setAttributeNS(null, 'r', r);
       c.setAttributeNS(null, 'style', 'fill: none; stroke: black;  
stroke-width: 2px');
       document.documentElement.appendChild(c);
     };
   </script>
</svg>

Code length doesn't have anything to do with code complexity by the  
way. I trimmed down DOM calls to a minimum here, but if you wanted to  
do it in a more verbose and possibly clearer way (using a separate  
setAttributeNS() call for each attribute) then complexity remains the  
same as it's only one method reused all over again.

Antoine
-- 
Antoine Quint <aq@fuchsia-design.com>
W3C Invited Expert (SVG and CDF)
SVG Consulting and Outsourcing
http://svg.org/user/graouts/diary

Attachments

Received on Friday, 5 November 2004 10:24:51 UTC