4D SVG

 

 

 

4D SVG is a component that takes advantage of 4D v11 SQL's native SVG engine, allowing you to create and manipulate SVG graphics within your 4D applications. With it, you can create, transform, and even animate SVG images, bringing even more versatility to your 4D v11 SQL solutions.

The component provides commands to meet your most frequent graphical needs, giving you access to parameters that will let you create your own SVG graphics, or modify existing SVG files from other sources.

 

It includes an SVG Viewer that will let you view your SVG files both as an image and as the XML source code. A separate Syntax Palette lists all of the component's commands - logically grouped by theme - which can be dragged and dropped into your 4D methods, along with all of their parameters.

 

Additionally, 4D SVG includes its own 4D Pop component that gives you access to the functions via the 4D Pop toolbar.

 

An exhaustive list of the parameters and commands is available in the 4D SVG documentation, included with the component.

 

What is SVG?

 

SVG stands for Scalable Vector Graphics. It is an XML-based standard for vector images, maintained under the stewardship of the W3C (World Wide Web Consortium) standards body. It can be used for anything from user interface and Web graphics to large-scale printing applications. Because of its scalability, the same images can be used across all applications.

 

When dealing with two-dimensional images, there are two types: Raster (or bitmap) graphics that are comprised of hundreds to millions of individual pixels, and vector graphics that are based upon mathematical descriptions using points, lines, curves, and polygons. Because they employ the latter, SVG images can be resized – to be almost limitlessly smaller or larger – with no degradation of quality, like blurring or pixellation.

 

Why use 4D SVG?

 

Besides being a widely-supported standard, vector graphics can bring tangible benefits to 4D developers.

 

Lighter

 

Vector graphics are lightweight and versatile, providing relatively lightweight file sizes. Using smaller graphics files lightens the load on your object library when developing in 4D, resulting in lighter applictaions when you deply.

 

For example, a very basic image of a simple button could be drawn in SVG as a rectangle comprised of four points, as well as a color defined for the lines and the filling. As a typical JPEG file that's 128 pixels wide, it weighs in at about 1.4 kb. As an SVG file, it's a paltry 400 bytes. This may not seem like a big deal at first. But in projects involving numerous images, the bits and bytes start to add up!

 

 

More Scalable

 

Beyond the file size benefit of vector graphics, the S in SVG stands for "scalable." This means that an image can be resized without any degradation. For comparative purposes, let's look at a slightly more complex graphic in SVG, JPEG, and GIF formats.

 

At 72 pixels across, these smileys are not significantly discernible. In fact, the GIF version weighs in even lighter than the SVG version at 1 kilobyte. But what happens if we were to simply take these exact same files and enlarge them to 256 pixels wide?

 

All of a sudden, the extra bytes of SVG are worthwhile! In fact, to have a sharp, clear GIF at this width, the file would have to be 4 KB. And a JPEG file would have to be over 12 KB. The SVG version remains at 1.9 KB, and would continue to work even if you wanted to make it the size of a roadside billboard.

 

This scalability has two benefits. First, you can use a much smaller graphics file for an image you intend to fill the screen. Secondly, it means you can repeatedly use the same image for multiple purposes - small for icons, medium-sized for general content, and even high resolution for printing. This replaces the need for storing many versions and sizes of the same image in your library for each distinct use.

 

Programmatic Control

 

With 4D SVG, size isn't the only factor over which you have complete power.

 

Because images are based on XML, you can modify each parameter easily from 4D to transform one single image repeatedly.

 

The above illustration, for example, is a single SVG image of a pentagon transformed twice into two very different figures, simply by modifying the points.

 

Of course, shapeshifting isn't 4D SVG's only talent. Because any text placed in an SVG image is still treated as text, you can repeatedly modify it without the need for multiple files.

 

 

Above you have a single file for a graphical button, used several times over with the text modified via 4D SVG.

 

The component can also be used to create useful animations. For example, a method using 4D SVG's transform, rotate and scale commands can turn an SVG image of an analog clock into a fully functional timepiece.

 

In this example, there is only one image used - the clock - and 4D SVG commands are used to modify the position of the arms within that image. The second hand ticks forward each second, and the minute and hour hands smoothly advance as time marches on. And because the clock is a vector image, the window can be resized as much as the user likes without any loss of quality.

 

 

SVG in 4D

 

 

Take advantage of SVG in 4D v11 SQL Release 3. See how this powerful and elegant technology can bolster your user experience.