30:[] 2e:{"title":"Crash course on SVG","cells":[{"id":0,"value":"md`# Crash course on SVG\n\nSVG is a markup language to describe 2D drawings by text. Similarly to HTML, the language has a hierarchycal organization, where elements are contained within other elements. \n\nThe construction of a visualization consists in the composition of multiple tags, organized within the visible viewport. As we compose words and structure to create HTML document, a similar approach is used in SVG to put together primitive shapes to compose more complex drawings\n\nThe SVG language is wide. we are discussing only a minimum part of the available tags. Please refers to official documention for more deatils:\n - SVG Specification: http://www.w3.org/TR/SVG/\n - Mozilla Developer Network: https://developer.mozilla.org/en/SVG\n - D3.js API Reference: https://github.com/mbostock/d3/wiki/SVG-Shapes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"html`\n

Examples adtapeted from Pocket Guide to Writing SVG

Complete text available: here

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## SVG first example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Coordinate System\n\nThe position of each element in the SVG viewport is determined by mean of a reference system, where origin is located in the top left corner, _x_ axis grows from left to right, _y_ axis grows from top to bottom\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## Basic shapes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`#### Rectangle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`#### Circle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`#### Ellipse`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`#### Line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`#### Polyline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`#### Polygon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`#### Path`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`#### Stairways example using path`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`#### Stairways example using _H_ and _V_ commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`#### Stairways example with relative coordinates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`### Transformations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`#### Translation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}