- From: Fred P. <fprog26@hotmail.com>
- Date: Sat, 12 Apr 2003 18:48:46 -0400
- To: chris@w3.org
- Cc: www-svg@w3.org
UML images
http://j2k.sf.net/svg/attribute.gif
http://j2k.sf.net/svg/function.gif
Screen shots
http://j2k.sf.net/svg/box.gif
http://j2k.sf.net/svg/box2.gif
http://j2k.sf.net/svg/box3.gif
http://j2k.sf.net/svg/box4.gif
http://j2k.sf.net/svg/box5.gif
http://j2k.sf.net/svg/box6.gif
SVG+PHP and DHTML prototype
http://j2k.sf.net/svg/broken.php
http://j2k.sf.net/svg/view9.php
http://j2k.sf.net/svg/uml9.html
SVG Button and drag-drop example:
http://www.xfront.org/svgdemo/source/house.html
>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>
><!----------------------------------------------------------------------------------------------->
>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
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
>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
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.
Excellent.
>
>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.
YES!
>
>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
<rect x="100" y="80" width="100" height="20" class="UML-box-lined"
style="text-rendering:crisp-edges; shape-rendering: crispEdges;" />
or
<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 ][
>#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.
http://j2k.sourceforge.net/svg/box3.gif
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.
YES.
>
>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!
http://j2k.sourceforge.net/svg/box4.gif
>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:
http://j2k.sourceforge.net/svg/
>FP> The main expectation is to replace
>FP> 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.
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:
http://www.xfront.org/svgdemo/source/house.html
>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?
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
>type.
OK.
>
>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.
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>
><!----------------------------------------------------------------------------------------------->
>
>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.
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*
http://join.msn.com/?page=features/junkmail
Received on Saturday, 12 April 2003 18:48:55 UTC