Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
SVG
Last updated at 10:33 am UTC on 10 October 2018
Scalable Vector Graphics

SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group
http://www.w3.org/Graphics/SVG/


Though the SVG Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language like Adobe's PDF. It contains provisions for rich graphics, and is compatible with CSS for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page.
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
http://www.svgopen.org/2002/papers/danilo_fujisawa__svg_as_page_description_language/index.html

Reference

https://developer.mozilla.org/en-US/docs/Web/SVG

Tutorials

An SVG Primer for Today's Browsers, 2010 (link)
https://www.w3schools.com/graphics/svg_intro.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction

Squeak implementation

An SVG output of a Morph hierarchy is not implemented yet but there are provisions already done by Marcel Weiher (2002) for implementing this: See Postscript support, NullEncoder, PostscriptCanvas.

Examples

Simplest SVG document
SVG construction example 1
SVG construction example 2
SVG construction example 3
SVG construction example 4

See also



Notes

coordinate system
SVG_Canvas_default_grid.png

images
https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#image

viewport
http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
The viewport is set through height and width attributes within the <svg>.

The viewport is the visible section of an SVG. While an SVG can be as wide or as high as we wish, only a certain section of this image can be visible at a time.


and viewbox
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844
https://css-tricks.com/scale-svg/

group element <g>
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
The transform attribute may be applied to a group: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

SVG minimal document - LODraw export


polyline element
The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline


path
the most complex element. It uses a simple command language to describe a path
Move to command, line to command and others, see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Example: <path d="M2000 2000 h 1000 v 1000 h 1000 v 1000" fill="none" stroke="red"/>