Introduction to SVG
Making a landscape with a script from SVG components taken in a library.
SVG demonstrations
SVG is a standard format to add vector graphics and animations in Web pages or Electron applications.
SVG is both a format for storage and display of vector images. In fact an SVG file is displayed directly in a browser. It is slower than the Canvas API, but can be combined with other elements of an HTML page and as we shall see, can also animate...
What can we do with SVG?
Examples of applications showing the range of possibilities of this format.
SVG vs Canvas, at decision time
What format to choose to embed graphics into a webpage?
Demonstrations
In some demos the Scriptol language is used as the source language, next to JavaScript, because it has features specially needed here. The goal orientation is an example.
Scriptol is compiled to JavaScript, which provides compatibility with many existing libraries.
SVG: Moon landing and programming by goal.
Demonstration of goal oriented programming applied to a lunar module displayed in SVG.
SVG: Car on a road and event programming.
An image tag is dynamically created to move the car in a setting made in SVG. An event is programmed to be triggered when the goal is achieved.
With the same commands as on an electronic assembly, the user can fold or unfold the finger.
By transforming an SVG image in a JavaScript object, faster animations are obtained... Demonstration included.
SVG: Creating beautiful titles with the text tag
We will see how to create filters, including lighting effet and apply it to a text, and all text attributes in SVG.
See also...
- SVG images in canvas. SVG drawings may also be displayed in canvas with a small JavaScript interpreter.