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

Re: [SVG] Experiment and proposal

From: Chris Lilley <chris@w3.org>
Date: Sat, 12 Apr 2003 22:48:22 +0200
Message-ID: <41357457781.20030412224822@w3.org>
To: "Fred P." <fprog26@hotmail.com>
CC: www-svg@w3.org

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> <!----------------------------------------------------------------------------------------------->
FP> <?xml version='1.0' encoding='iso-8859-1'?>
FP> <!DOCTYPE svg SYSTEM 
FP> 'http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd'>
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>

FP> <!----------------------------------------------------------------------------------------------->

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 curves,
FP> one of the troublesome work around this is the following:

FP> <!----------------------------------------------------------------------------------------------->
FP> <?xml version='1.0' encoding='iso-8859-1'?>
FP> <!DOCTYPE svg SYSTEM 
FP> [...]
FP> </svg>
FP> <!----------------------------------------------------------------------------------------------->


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> <!----------------------------------------------------------------------------------------------->
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 without 
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

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.

FP>     align: justify;     // We got center/left/right but no justify
FP>                         // which is the default layout for IEEE/ACM/journal 
FP> paper, etc.

We have start, middle, end and the property is called text-anchor.
http://www.w3.org/TR/SVG11/text.html#TextAnchorProperty

The text-align property, in CSS2, does indeed take left, center and right -
and also justify. However, this property is not used in SVG.
http://www.w3.org/TR/CSS2/text.html#propdef-text-align

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 drawing/conversion
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
http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty

FP>     stroke-width: .1;   // Fraction doesn't work neither.

Yes it does. In what way does it not work?


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.


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.

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'?

FP> consider rendering the following 'trivial' UML
FP> function box:

FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #000000 ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC 
FP> ][ #FFFFCC ][ #FFFFCC ]
FP> [ #FFFFCC ][ #FFFFCC ][ #000000 ][ #FF00FF ][ #800000 ][ #FFFFCC ][ #FFFFCC 
FP> ][ #FFFFCC ][ #FFFFCC ]
FP> [ #FFFFCC ][ #800080 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #000080 ][ #FFFFCC 
FP> ][ #FFFFCC ][ #FFFFCC ]
FP> [ #000080 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #000080 
FP> ][ #FFFFCC ][ #FFFFCC ]
FP> [ #000000 ][ #800080 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF 
FP> ][ #800000 ][ #FFFFCC ]
FP> [ #FFFFCC ][ #000080 ][ #000000 ][ #FF00FF ][ #FF00FF ][ #FF00FF ][ #FF00FF 
FP> ][ #FF00FF ][ #000080 ]
FP> [ #FFFFCC ][ #FFFFCC ][ #800080 ][ #000080 ][ #FF00FF ][ #FF00FF ][ #FF00FF 
FP> ][ #000080 ][ #000000 ]
FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #000000 ][ #800000 ][ #FF00FF ][ #000000 
FP> ][ #800080 ][ #FFFFCC ]
FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #000080 ][ #000080 ][ #000080 
FP> ][ #FFFFCC ][ #FFFFCC ]
FP> [ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #FFFFCC ][ #800000 ][ #FFFFCC 
FP> ][ #FFFFCC ][ #FFFFCC ]

Sorry, I don't understand the syntax you are using or what you intend
to convey with it.

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.


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.


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.

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

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.

FP>    The main expectation is to replace GIF/PNG/Flash/HTML Table+CSS/PDF/DOC 
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.

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.

FP> <!----------------------------------------------------------------------------------------------->

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?

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
type.

FP>    Another solution would be to be able to do something like SHTML document
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 then.

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.

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> <!----------------------------------------------------------------------------------------------->

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:

http://www.w3.org/TR/SVG11/

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.


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
Received on Saturday, 12 April 2003 16:48:26 GMT

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