30:[] 2e:{"title":"SVG Intro","cells":[{"id":0,"value":"# SVG Intro\n\n## A short introduction on how to create SVG contents with JS programming","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"---\n## What is SVG?","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"From the [Wikipedia SVG entry:](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)\n\n>Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.\n\n>SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software. The Arabic Unicode programmer and calligrapher, Thomas Milo credits the adoption of SVG by Wikipedia as the reason why the compact imaging technology gained popularity.\n\n>All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"## How to create an SVG element?\n\nSince SVG is an HTML tag, one can simply create it in much the same way as other html content in Observable.\n\nFor instance, one can simply create an html cell and write the SVG specification, like so:","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":83,"value":"We can also create the element in an JavaScript cell using the `html` template literal, like so:","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"## How to draw using SVG?\n\nGraphical marks can be placed inside the svg element using appropriate `svg` primitives. Note that `svg` *primitives* inside an `svg` *element* are not strictly html elements, since the specification of the contents of an `svg` element is a separate part of the HTML5 standard. \n\nFor instance, a rectangle can be drawn using the `rect` tag, like so:\n","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":102,"value":"### SVG primitives\n\nThere are quite a few svg primitive instructions. You can find a good description of these in the [Mozilla SVG tutorial page](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial). Here's an example copied from there:\n","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":109,"value":"You may notice in the example above that the geometry and drawing parameters are specified as attributes in the various primitive elements. In general, the quotes for the attribute values are unnecessary, unless they contain spaces or other special characters. Notice also that attributes `version` and `xmlns` of the `svg` elements are optional.","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"## How to add a primitive to an `svg` element?\n\nFor adding a new primitive to an existing svg element, we can use the same `append` method of all html elements. Since the primitives themselves are defined in separate namespace (they are not \"real\" html elements), creating svg primitives in Observable JS can be done using the `svg` tagged template.","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"theSVG = {\n let theSVG = html``;\n theSVG.append(svg``);\n return theSVG;\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"This is useful when several elements are to be added programatically, for instance, in response to an interaction. For instance, pressing the button below adds a new circle to the svg element above.","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"{\n let button = html``;\n button.onclick = (e) => {\n let x = Math.random() * 300;\n let y = Math.random() * 200;\n theSVG.append(svg``);\n };\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"## How to modify a primitive?\n\nSince the primitives are also elements, they can be located inside the DOM using the usual html API. For instance, they can be found by id using getElementById. Similarly, modifying the element is just a question of modifiying the proper attribute.\n","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"{\n let button = html``;\n button.onclick = (e) => {\n let rect = theSVG.getElementById(\"grayrect\");\n let x = Math.random() * 300;\n let y = Math.random() * 200;\n rect.setAttribute(\"x\", x);\n rect.setAttribute(\"y\", y);\n };\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}