- From: Chris Lilley <chris@w3.org>
- Date: Sat, 12 Apr 2003 22:48:22 +0200
- 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 UTC