[TYPO3-core] RFC: #15900: [Feature] Add SVG support for all browsers

[Steffen Kamper]

Hi,

this is a SVN patch request.

Type: Feature

BT Reference: http://bugs.typo3.org/view.php?id=15900

Branches: trunk

There is a library that allows SVG support for all browsers. The trick 
is a flash fallback for browsers that doesn't have native SVG support, 
so all works also in eg IE 6/7/8.
See the library at http://code.google.com/p/svgweb/, watch the video or 
explore the samples.

The implementation adds a new cObj called SVG to render SVG data. You 
can use xml data direct or reference to any SVG file.

This allows to include SVG files from applications that support SVG 
export, allow designer to do animations without knowing javascript etc.

Without the library you are faced to no / uncomplete implementation, see
http://www.codedread.com/svg-support.php


How to use:

1) extract lib.zip into typo3/contrib
2) extract svg.zip into fileadmin (only samples)
3) apply the patch

For test here are 3 TS examples

First example shows some simple gemetrics
Second example shows the "Hello World of SVG" (the tiger)
Third example shows the well known game "Tetris"

#DEMO with some geometrics
page = PAGE
page {
   config {
       doctype = html_5

   }
   javascriptLibs {
       SVG = 1
       #SVG.debug = 1
       #SVG.forceFlash = 1
   }

   10 = TEXT
   10.value = <h1>SVG DEMO</h1>

   20 = SVG
   20 {
     value (
       <rect x="100" y="100" width="500" height="200" fill
="white" stroke="black" stroke-width="5px"/>
     <line x1="0" y1="200" x2="700" y2="200" stroke="
red" stroke-width="20px"/>
         <polygon points="185 0 125 25 185 100" transform="rotate(135 
125 25)"
/>
         <circle cx="190" cy="150" r="40" stroke="black" s
troke-width="2" fill="yellow"/>
     )

     noscript.cObject = TEXT
     noscript.cObject.value = no svg rendering possible, use a browser
     width = 600
     height = 600
}



#DEMO with the tiger
page = PAGE
page {
   config {
       doctype = html_5

   }
   javascriptLibs {
       SVG = 1
       #SVG.debug = 1
       #SVG.forceFlash = 1
   }

   10 = TEXT
   10.value = <h1>SVG DEMO</h1>

   20 = SVG
   20 {
     src = fileadmin/svg/tiger.svg
     noscript = no svg rendering possible, use a browser
     width = 600
     height = 600
   }
}



#DEMO of Tetris
page = PAGE
page {
   config {
       doctype = html_5

   }
   javascriptLibs {
       SVG = 1
       #SVG.debug = 1
       #SVG.forceFlash = 1
   }

   includeJS {
       file = fileadmin/svg/tetris.js
   }

   10 = TEXT
   10.value = <h1>SVG DEMO</h1>

   20 = SVG
   20.value (
         <text x="1" y="1" font-size="1px">Mozilla SVG Tetris - P
ress 'h' for help.</text>
         <g id="preview" stroke-width="0.02"/>
         <g id="board" stroke-width="0.02"/>
   )
}

I will implement a Content element later, so this RFC is just about the 
basic implementation.

vg Steffen
-------------- next part --------------
A non-text attachment was scrubbed...
Name: svg_ts.diff
Type: text/x-diff
Size: 5643 bytes
Desc: not available
URL: <http://lists.typo3.org/pipermail/typo3-team-core/attachments/20101005/d9472e4a/attachment-0001.diff>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: lib.zip
Type: application/zip
Size: 74348 bytes
Desc: not available
URL: <http://lists.typo3.org/pipermail/typo3-team-core/attachments/20101005/d9472e4a/attachment-0002.zip>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: svg.zip
Type: application/zip
Size: 35355 bytes
Desc: not available
URL: <http://lists.typo3.org/pipermail/typo3-team-core/attachments/20101005/d9472e4a/attachment-0003.zip>