W3C home > Mailing lists > Public > www-archive@w3.org > November 2004

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

From: Antoine Quint <ml@graougraou.com>
Date: Fri, 5 Nov 2004 11:24:42 +0100
Message-Id: <E828FCB6-2F14-11D9-B4CA-000393D124C4@graougraou.com>
Cc: www-archive@w3.org
To: Ian Hickson <ian@hixie.ch>

> [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,  
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',  
       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');

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 Quint <aq@fuchsia-design.com>
W3C Invited Expert (SVG and CDF)
SVG Consulting and Outsourcing

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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:32:38 UTC