W3C home > Mailing lists > Public > www-svg@w3.org > April 2003

Re: [SVG] Experiment and proposal

From: Fred P. <fprog26@hotmail.com>
Date: Sat, 12 Apr 2003 18:48:46 -0400
To: chris@w3.org
Cc: www-svg@w3.org
Message-ID: <BAY2-F44ocn9anUsswv0000b804@hotmail.com>

UML images

Screen shots

SVG+PHP and DHTML prototype

SVG Button and drag-drop example:

>From: Chris Lilley <chris@w3.org>
>Reply-To: Chris Lilley <chris@w3.org>
>To: "Fred P." <fprog26@hotmail.com>
>CC: www-svg@w3.org
>Subject: Re: [SVG] Experiment and proposal
>Date: Sat, 12 Apr 2003 22:48:22 +0200
>On Saturday, April 12, 2003, 2:33:56 PM, Fred wrote:
>FP> Here's some experiments that were performed in an attempt to use
>FP> SVG, PNG or HTML tables to display clean, professional, good
>FP> looking UML class diagram drawing results from an industrial
>FP> database back-end for documentation purposes.
>FP> Unfortunately, some problems occurs and some possible solutions
>FP> are proposed in this document.
>FP> Test Environment:
>FP> Microsoft Windows 98 SE
>FP> Internet Explorer 5.50.x.x; SP2
>FP> Adobe SVG Viewer 3.0 build 76
>FP> Screen Resolution: 1152x864 True color (32-bit)
>FP> Other tools:
>FP> PHP4 on Apache HTTP Server 1.3.x
>FP> ActiveState ActivePerl 5.6.1 build 635
>FP> with GD.ppm for PNG generation
>Thanks for taking care to make a good report that states what
>implementation was used. It helps.
>FP> The following display a problem with SVG stroke-width: 1 to display UML
>FP> boxes.
>FP> <?xml version='1.0' encoding='iso-8859-1'?>
>FP> <svg>
>FP>       <rect x='100' y='40' width='100' height='60'
>FP>         style='
>FP>           fill:           #FFFFCC;
>FP>           stroke:         #990033;
>FP>           /* Adobe SVG viewer 3.0 build 76 */
>FP>           /* Width 2 with shadow at high quality (default) */
>FP>           /* Width 1 without shadow at low quality         */
>FP>           stroke-width:   1;
>FP>           fill-opacity:   1;
>FP>           opacity:        1;
>FP>           stroke-opacity: 1;
>FP>         '
>FP>       />
>FP> </svg>
>That gives a rectangle with a solid fill and an outline. It does not
>demonstrate a problem - could you describe the problem? I don't
>understand what is meant by 'shadow' since your file does not produce
>any shadow. Do you mean the anti-aliasing of the lines?
>(Also, why use an obsolete three year old DTD from a working draft? I
>suggest you use
>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd" )
>FP> Apart using lines after lines with special orientation or bezier 
>FP> one of the troublesome work around this is the following:
>FP> <?xml version='1.0' encoding='iso-8859-1'?>
>FP> [...]
>FP> </svg>
>This gives a stack of three labelled boxes. I am not sure what problem
>is demonstrated by this. There are some use elements that do not point
>to anything.
>FP> Another way is to use an HTML table as follow:
>FP> <!doctype html public '-//W3C//DTD HTML 4.0 Transitional//EN'>
>FP> [...]
>FP> </html>
>That givers much the same result, but with two broken images in the
>lower two boxes.
>FP> Propositions:
>FP> 1. Embed/Object an SVG object directly inside an HTML/XHTML document 
>FP> SRC=''
>FP>     <EMBED  NAME='svgEmbed1'
>FP>             TYPE='image/svg+xml'
>FP>             width='500'
>FP>             height='500'
>FP>             PLUGINSPAGE='http://www.adobe.com/svg/viewer/install/'>
>FP>             <SVG>...</SVG>
>FP>     </EMBED>
>FP>     <OBJECT NAME='svgEmbed2'
>FP>             TYPE='image/svg+xml'
>FP>             width='500'
>FP>             height='500'
>FP>             PLUGINSPAGE='http://www.adobe.com/svg/viewer/install/'>
>FP>             <SVG>...</SVG>
>FP>     </OBJECT>
>You can do that, but without all the embed and object - just include
>the <svg> (not SVG) inline. User agents that support this include
>Mozilla (SVG-enabled version) and XSmiles.
>FP> 2. Provide CSS stylesheet property for text (for SVG/HTML/XHTML):
>FP>     aliased: false;     // Force anti-aliased text
>FP>     aliased: true;      // Force non-anti-aliased text (TrueType font)
>Aha! OK so what you need to add is text-rendering:crisp-edges

This CSS property doesn't do anything.
Neither on the text neither on the rectangle border.

>FP>     selectable: false;  // Can highlight the text acts like a graphic
>FP>     selectable: true;   // useful for button icons and similar
>Making text non-selectable is possible with the pointer events, but is
>considered bad practice for accessibility.

With an heavy-duty complicated thing or one line of code?

>FP>     align: justify;     // We got center/left/right but no justify
>FP>                         // which is the default layout for 
>FP> paper, etc.
>We have start, middle, end and the property is called text-anchor.
>The text-align property, in CSS2, does indeed take left, center and right -
>and also justify. However, this property is not used in SVG.

After many years of HTML, I was not aware of that. Good to know. =P
Maybe I try to be too much back compatible to NS3/IE3 and higher.

>FP> 3. Provide XHTML <table> layout in SVG
>FP>      Letter by letter, word by word fixing is tedious
>Table-like layout is under consideration.


>FP> 4. Provide CSS stylesheet property for graphics:
>FP>     blur: true/false or 0..100%;
>FP>     // for line, box, circle, elipse and text: sub-pixel 
>FP>     // Equivalent per object: low/high quality on Adobe SVG viewer
>Another Aha! So, when you mention shadow or blur you are referring to
>anti-aliasing. Because the line that you specified was exactly on a
>pixel boundary, the anti-aliased view gave you a two-pixel wide line
>at 50% opacity as the best approximation.


>FP>     stroke-width: 1;    // Doesn't work as expected.
>It does, although if you want anti-aliasing to be switched off for the
>stroke then you need to add shape-rendering: crispEdges

    <rect x="100" y="80" width="100" height="20" class="UML-box-lined" 
style="text-rendering:crisp-edges; shape-rendering: crispEdges;" />


    <rect x="100" y="80" width="100" height="20" class="UML-box-lined" 
style="text-rendering:crisp-edges; shape-rendering: crisp-edges;" />

doesn't do anything!

>FP>     stroke-width: .1;   // Fraction doesn't work neither.
>Yes it does. In what way does it not work?

It doesn't work gives a 2 width border blurred anti-aliased.

>FP>     People currently rely on bezier curved (i.e. VectorEye translator)
>FP>     or
>FP>     Line by Line drawing with tedious effort to have very thin line
>Not sure what is meant by that, either. The software that produces the
>line is independent of how the line is drawn.

Nope, not on Adobe.
You can trick Adobe to draw thin line but it's tedious.

>FP> 5. Even though SVG is for Vector graphics, it's very tedious to obtain
>FP>    the same effect than bitmap drawing effects at pixel scale.
>FP>     Provide something like: D x y  =>  Print a Dot at (x,y)
>FP>      <g id='bitmap'>
>FP>         <!-- Bitmap derived version -->
>FP>         <path style='fill:#040404' d='D6 2 D l0 3 D 10 4'/>
>FP>      </g>
>SVG is not meant to replace raster graphics. If you want to include a
>raster, include it with the image element. if you want to simulate a
>raster, then generate lots of little rectangles.

Little rectangles are not space efficient and are difficult to work out,
even if you have a very big zoomed picture with HEX code in front you!

Therefore, it makes sense to have dot elements!
In fact I thought that using M x y would do a dot, but it doesnt
without a line.

>FP> 6. Even without bitmap it's very difficult to provide weird stroke
>FP> shadow for boxes,
>Can you illustrate what you mean by 'wierd stroke shadow for boxes'?

Look at bitmap!
http://j2k.sourceforge.net/svg/box3.gif (original)
Low quality purple last one with dotted lines
http://j2k.sourceforge.net/svg/box4.gif (svg attempt)

>FP> consider rendering the following 'trivial' UML
>FP> function box:
>FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #000000 ][ #FFFFCC ][ #FFFFCC ][ 
>FP> ][ #FFFFCC ][ #FFFFCC ]
>FP> [ #FFFFCC ][ #FFFFCC ][ #000000 ][ #FF00FF ][ #800000 ][ #FFFFCC ][ 
>FP> ][ #FFFFCC ][ #FFFFCC ]
>FP> [ #FFFFCC ][ #800080 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #000080 ][ 
>FP> ][ #FFFFCC ][ #FFFFCC ]
>FP> [ #000080 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ 
>FP> ][ #FFFFCC ][ #FFFFCC ]
>FP> [ #000000 ][ #800080 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ 
>FP> ][ #800000 ][ #FFFFCC ]
>FP> [ #FFFFCC ][ #000080 ][ #000000 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ 
>FP> ][ #FF00FF ][ #000080 ]
>FP> [ #FFFFCC ][ #FFFFCC ][ #800080 ][ #000080 ][ #FF00FF ][ #FF00FF ][ 
>FP> ][ #000080 ][ #000000 ]
>FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #000000 ][ #800000 ][ #FF00FF ][ 
>FP> ][ #800080 ][ #FFFFCC ]
>FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #000080 ][ #000080 ][ 
>FP> ][ #FFFFCC ][ #FFFFCC ]
>FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #800000 ][ 
>FP> ][ #FFFFCC ][ #FFFFCC ]
>Sorry, I don't understand the syntax you are using or what you intend
>to convey with it.

Each box [ #FFFFCC ] represent a pixel with that HEX RGB color

>FP> Even with lines, bezier curves, it never looks as good as the
>FP> original picture and the shadow doesn't scale well when make
>FP> bigger.
>FP> Stroke and Shadow consist of: Red, Blue, Dark purple and black in a
>FP> pseudo-random fashion.
>Sounds like a pattern to me.

Well, I don't know what was the original pattern,
I just try to vectorized a bitmap pixel-level shadow.

>FP> Other attempts but for attribute component:
>FP>       <g id='UML_attribute_v7'>
>FP>         <path style='fill:#000080; stroke:#000080' d='M 8 6 L 5 9 L 0 4 
>L 3
>1 z'  />>
>FP>         <path style='fill:#FF00FF; stroke:#FF00FF' d='M 3 0 L 8 5 L 5 8 
>L 0
>3 z'  />>
>FP>         <path style='stroke:#000000' d='M 2 1 L 3 0 l.75 .75'/>
>FP>         <path style='stroke:#800000' d='M 4 1 l.75 .75'/>
>FP>         <path style='stroke:#000080' d='M 5 2 L 6 3 l.75 .75'/>
>FP>         <path style='stroke:#800000' d='M 7 4 l.75 .75'/>
>FP>         <path style='stroke:#000080' d='M 8 5 L 5 8'/>
>FP>         <path style='stroke:#000000' d='M 6.5 7.5 l-.75 -.75'/>
>FP>         <path style='stroke:#800080' d='M 7 7 l-.75 -.75'/>
>FP>         <path style='stroke:#000080' d='M 6 8 L 4 8'/>
>FP>         <path style='stroke:#444444' d='M 7 4'/>
>FP>         <path style='stroke:#800000' d='M 5 9'/>
>FP>         <path style='stroke:#800000' d='M 4 7'/>
>FP>         <path style='stroke:#000000' d='M 0 4'/>
>FP>         <path style='stroke:#000000' d='M 2 5'/>
>FP>         <path style='stroke:#000000' d='M 0 4'/>
>FP>         <path style='stroke:#000000' d='M 3 7'/>
>FP>         <path style='stroke:#000000' d='M 0 4'/>
>FP>         <path style='stroke:#000000' d='M 6 7'/>
>FP>         <path style='stroke:#000000' d='M 8 6'/>
>FP>       </g>
>OK so what you are looking for is a multicolor stroke, and fillets on
>the corners of the stroke, and a drop shadow.


>That is the sort of thing  where you are better describing your UML
>diagram at a higher level in XML, then using XSLT or some other
>transformation method to give you exactly the sort of geometry you
>want in SVG. So you would have a function that generates a multicolor
>stroke etc.

Well the goal is to generate SVG from XML in fact from a database,
but to draw such you need to know how to draw
one template - generic version, right? =P
That's what I'm doing right now!

>FP> * Experiments were also performed to try to mimic the 'protected'
>FP> attribute lock icons - with bezier curves, bitmap, VectorEye
>FP> translator
>FP> This conducted to the conclusion that some techniques must be
>FP> created to enhance the transform of bitmap into vectorial images.
>FP> The major issue is mainly pixel by pixel shadow and other
>FP> transforms, it seems to be quite a challenge to create such thing
>FP> even for small 9x9 pictures.

Look at the right-hand side fuzzy purple box!


>It sounds like you need a function library to generate these complex
>shapes for you and emit the SVG corresponding.

Who you think is gonna write the library?... me! =P

>FP> Space is not an issue, it might be for 640x480 gif image to be
>FP> converted in SVG perhaps.
>FP> Most translator use something that looks like a drawing picture
>FP> instead of a professional picture; therefore, making the
>FP> end-result quite laughable and unprofessional sometimes.
>Its difficult for me to comment without seeing examples and knowing
>what you are trying to produce.

See this link:

>FP>    The main expectation is to replace
>FP> with SVG files.
>FP> In fact, if SVG provided the same kind of support than HTML for
>FP> forms and text display, it could even replace HTML/XHTML
>FP> altogheter, by providing a real canvas environment for dynamic
>FP> display.
>Integration of XForms and SVG is a current area of development in the
>SVG working group.

I'm gonna look into it, hopefully,
it's simple enough to use from the documentation.

>FP> It could even provide a scriptable web-based GUI environment with
>FP> a Java/Windows/MacOS/KDE-taste, where widgets would be simple <g
>FP> id='button'></g> scalable graphic elements.
>If you are expecting <g id="button"> to produce something that looks
>like and acts like a button, then it will not. However, work is
>ongoing in the SVG wg to allow SVG to be used to render arbitrary XML.
>So, you could asimyl have
><fp:button xmlns:fp="http:example.org/pf"/>
>and have SVG be generated to render it and make it have differnt push
>states and so on.

Look at this SVG button stuff:

SVG Button and drag-drop example:

>FP> * Extension problems
>FP>    It would be also useful, if SVG documents could be 'MORE' scriptable
>FP>    or at least being generated by PHP/ASP/JSP.
>SVG documents can be and are beng generated by all of PHP, ASP, and
>JSP. There are products that do this, and people have written their
>own. What led you to the conclusdion that this was not possible?

I wrote one that generated SVG, but in TWO steps!
In fact, with your other browser it would work with <svg> inline,
but Netscape, IE don't support it! Mainly 98% of all visitors.

>FP> The main problem is that let say a file called view.svg.php
>FP> generating an view.svg, the browser won't recognized that PHP
>FP> generates an SVG document, even though it does!
>This is not a problem with the SVG spec (and thus off tiopic for this
>list)but if you ask on svg-developers@yahoogroups.com they will tell
>you some work arounds to get over the buggy content sniffing
>assumpttions that MS IE makes, and how to generate the correct media


>FP>    Another solution would be to be able to do something like SHTML 
>FP>    with import or include statement to import document.
>FP>    It can be done by xlink:href altought.
>FP>    But the point would be to have a dynamic, conditional xlink:href 
>FP>    It would be nice to be able to say:
>FP>      <use xlink:href='windows.svg#button'  x='109'  y='88' />
>FP>      <use xlink:href='macos.svg#button'    x='109'  y='88' />
>FP>      <use xlink:href='java.svg#button'     x='109'  y='88' />
>FP>      <use xlink:href='kde.svg#button'      x='109'  y='88' />
>FP>      <use xlink:href='gnome.svg#button'    x='109'  y='88' />
>FP>      <use xlink:href='mytheme.svg#button'  x='109'  y='88' />
>FP>    by being able to specify such button 'theme'.
>That is already possible.

Really? I can do something like this already in PURE svg?

<use xlink:href='getCurrentTheme( "#button" )'  x='109'  y='88' />

ok maybe with some JavaScript?

>FP> Trying to do so would be possible if PHP generated document were
>FP> considered valid or with embedded SVG inside HTML as proposed
>FP> earlier.
>It is possible already.
>FP>    It could be done also via some heavy javascript.
>FP> One of the problem with PHP/ASP/JSP is that whenever a document is
>FP> fopen/fwrite/fclose then embedded inside an HTML, the file is not
>FP> flushed to disk;
>That is an issue with the specific implementatio you are using, not
>the specification.
>FP>   Currently, we are forced to go back to the old HTML/DIV/CSS technique
>FP>   with transparent GIF images, since SVG does NOT provide
>FP>   an equivalent professional look with current viewers, yet! =(
>Sorry to say this, but your conclusion is quite inappropriate. SVG does
>provide this, if you use it correctly. It wil then give a more
>professional look that some gif image hack.
>Please have a look at the specification:
>several of the problems that you encountered would have been solved by
>reading it.
>FP>   It's quite weird that current HTML browser can display properly
>FP>   thin border and text properly but that SVG viewer
>FP>   are still lacking such basic feature.
>See above, correct your code and reconsider.

Well, even with your suggestion, it still doesn't work,
any other work around ?

>FP> Hope this elucidate some problems faced in an
>FP> industrial/professional usage of SVG.
>You did point out a couple of issues, yes. Mostly though, the problems
>you found were due to inexperience with using the SVG specification
>and have already been solved, either in the SVG spec in most cases, or
>workarounds found for some limitations of current HTML browsers such
>as content sniffing.
>  Chris                            mailto:chris@w3.org

The new MSN 8: smart spam protection and 2 months FREE*  
Received on Saturday, 12 April 2003 18:48:55 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:24 GMT