Samples and Examples - PDF and ZIP file downloads
Use the Contact form and make an enquiry.
Regarding material on this page, enquire for:
- Web Apps resources, help, advice, for study, learning and development work.
- Collaboration in design and origination of Web Apps as teaching aids.
- Technical Web Apps for remote or mobile workers.
For students, teachers, engineers and ego-free programmers.
Scalable Vector Graphics - SVG
SVG - W3C docs. For engineers and programmers, for working diagrams and illustrations in Web apps, there is:
Worked example - pencil drawing of geometric figure (egg shape) inserted as image in Sketsa SVG Editor then 'traced' using the Sketsa Toolbox and DOM Editor. Resulting .svg file, copied from the Sketsa Source Editor, then used to copy/paste listed SVG statements. Graphic at left (click to enlarge) shows Sketsa eggshape.svg with the pencil diagram and SVG lines and paths overlaid in red, also a circular path selected and the DOM editor used to edit the path.
There is a PDF description with source code of EggShape application, taking things from pencil diagram to Sketsa Editor to PHP; try the web app here:
SVG Animation - Linkage Design
Carto.net has published set of articles covering SVG animation features and presenting practical examples.
This scheme probably applicable to many different solutions.
Open SVG-Edit in browser here
A user guide for SVG-edit is here
List of SVG elements and attributes that SVG-edit supports is here
Button toggles drop-down menu - select Image Library > IAN Image Library (log-in).
In SVG-Edit as shown, hazard warning sign is taken from IAN Image Library under heading Processes: Chemical - Click on the library illustration opens in
SVG editor. Integration & Application Network (IAN) is at ian.umces.edu.
IAN provides online version of SVG-Edit (renamed Diagram Creator) with direct
access to the IAN Symbol LIbraries. At ian.umces.edu/symbols/ there is video tutorial
for Diagram Creator and links to other resources.
Button toggles SVG markup. As shown above, markup is changed to prepare for inclusion as html (HTML5) inline SVG; changes
result from instructions on 'SVG symbol...' webpage at css-tricks.com
(but there are no CSS tricks here).
Given SVG markup in SVG-Edit, simply the path statements are copied for each symbol, each is given id and viewBox set from symbol width and height specified in the markup.