[These are notes from 4D Summit 2008 - pictures to follow later.]

Presenter: Tom Fitch, 4D Inc.

Demoed a database with interactive SVG areas. Click on an area on the graphic (a seating chart for an arena) and it maps it to the appropriate data elements and lets you take action on that element (buying a ticket for a particular seat). Likewise the image is data driven, so the seating chart updates automatically as things change.

SVG is completely Scalable, 'cause it's Vector Graphics... That means no jaggies or blurred images. Also generally smaller.

The cool part is that you can do mouse events on a scalable area, which is really difficult without SVG.

Shapes and gradients are perfect for SVG. But complex images can be larger. However, SVG are uncompressed images, so if you're using gzip on the web it can dramatically reduce the file size making it more competitive with small raster images.

Labels and descriptions in the image mean they're searchable. Active events and triggers are possible, as is animation (in part or the entire image). To animate ECMAScript and SML(?) are used, but animation is not supported by all browsers (not supported by Safari or Netscape).

IE only supports SVG if you have the Adobe plugin for SVG.

SVG is a text-based open standard for images developed by W3C with the help of Adobe. It's also an XML specification.

Basic SVG shapes (more are possible):

• <rect>
• <circle>
• <ellipse>
• <line>
• <polyline>
• <polygon>
• <path>

<path> is extremely useful since it can draw non-standard shapes. It draws by specifying the points... d="M 100 100 L 300 100 L 200 300 z" - the first one is the starting point, then L draws a line to each new area and z takes you back to the starting point.

SVG can go into any picture area just like other image type. If you put your charts in a picture area 4D will write it as SVG. You can also build by writing xml with the DOM commands. DOM EXPORT TO PICTURE writes the xml to an SVG picture.

One thing to realize is that the stroke width goes on the outside of the area, not the inside.

To get On Clicked events you have to set an ID attribute. Then you need to GET MOUSE coordinates and then pass those to SVG Find element ID by coordinates, but make sure you subtract the position of the picture area from the values you get from GET MOUSE since you need the position inside the picture area, not the position inside the window. You can get the coordinates of the picture area with GET OBJECT RECT. You can also group objects in an SVG area and when you click on them they return the ID for the group, not the particular object.

One word of warning - you'll need to use keyboard shortcuts when tracing an On Clicked event until you hit GET MOUSE since the mouse position at the time of GET MOUSE is critical.

You can have raster objects in the SVG area.

Converting to PDF right now only on Mac because Windows doesn't have native support for PDFs.

Tags: 4D Summit 2008, 4D-v11, SVG
Categories: 4D