28:null 29:["$","title",null,{"children":"Crash course on SVG | Salvo Rinzivillo | Observable"}] 2e:[] 2c:{"id":"98e94f1b1c64cd63","slug":"crash-course-on-svg","title":"Crash course on SVG","thumbnail":"7edd30276ce65f500382b16671544d3c7d923397e36cdf89d82301e0e625a999","access_level":"public","create_time":"$D2020-03-13T11:44:38.737Z","update_time":"$D2022-03-09T14:31:05.097Z","view_time":null,"first_public_time":"$D2020-03-13T12:23:32.241Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"f8a3fef24f739bee","login":"rinziv","name":"Salvo Rinzivillo","avatar_url":"https://avatars-next.observableusercontent.com/a1e77165ff15bd1c81528b9377c60f89223f0cea983a7198ff19508f862e6b63","tier":"starter_2024"},"version":198,"publish_version":198,"role":null,"authored":false,"authors":[{"type":"individual","id":"6dd18c7f1a1028af","login":"rinziv","name":"Salvo Rinzivillo","avatar_url":"https://avatars-next.observableusercontent.com/a1e77165ff15bd1c81528b9377c60f89223f0cea983a7198ff19508f862e6b63","tier":null}],"members":[{"type":"individual","id":"6dd18c7f1a1028af","login":"rinziv","name":"Salvo Rinzivillo","avatar_url":"https://avatars-next.observableusercontent.com/a1e77165ff15bd1c81528b9377c60f89223f0cea983a7198ff19508f862e6b63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"d142d4c063c417b5","slug":"va602aa","title":"VA602AA","owner":{"id":"f8a3fef24f739bee","login":"rinziv","name":"Salvo Rinzivillo"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`\n

Examples adtapeted from Pocket Guide to Writing SVG

Complete text available: here

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## SVG first example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`## Basic shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`#### Rectangle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`#### Circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`#### Ellipse`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`#### Line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`#### Polyline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`#### Polygon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`#### Path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`#### Stairways example using path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`#### Stairways example using _H_ and _V_ commands`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`#### Stairways example with relative coordinates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`### Transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`#### Translation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"