2c:null 2d:["$","title",null,{"children":"Quadbits Studio Emblem | Quadbits Studio | Observable"}] 32:T47c,// pristine version… svg``33:T48a,// clone pristine version… svgAsObject``34:T4d8,

At its core, SVG […] is an image format, like .jpg or .gif. We can pop them into an <img> tag, like any other image […]

This works, but it’s not what makes SVGs so cool and interesting. […]

Most image formats like .jpg are binary formats; if you tried to open them in a text editor, you’d see a bunch of gobbledygook. SVGs, by contrast, are specified using XML syntax, just like HTML! Instead of specifying the R/G/B color for each pixel, SVGs contain the set of drawing instructions required to render the illustration.

— Josh Comeau, A Friendly Introduction to SVG

35:[] 30:{"id":"c3dd5218be595f5b","slug":"quadbits-studio-emblem","title":"Quadbits Studio Emblem","thumbnail":"33e550567fe1f5e464b5ce8e0aa70ea60b461a1a43f6292210c5a6edf93a45a5","access_level":"public","create_time":"$D2022-08-25T11:06:12.569Z","update_time":"$D2026-03-24T11:15:12.511Z","view_time":null,"first_public_time":"$D2022-08-25T11:06:12.569Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":92,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"87551ead5fbad318","reply_to_id":null,"content":"Sadly, Ville V. Vanninen‘s website (apps.workflower.fi/vocabs/) can no longer be reached… See https://github.com/sakamies/vocabs","create_time":"$D2023-02-23T16:17:17.896Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Quadbits Studio Emblem","cells":[{"id":0,"value":"# Quadbits Studio Emblem","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"The following 2D tetrahedron emblem is a provisional logo I handcrafted for Quadbits Studio…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"// blueprint\nsvgAsImage``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// optimized version…\nthat = svgAsObject``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"viewof scale = ((step) =>\n Inputs.range([step, 3], { format: (x) => x.toFixed(2), step, value: step }))(\n 0.25\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"**Scalable Vector Graphics** (SVG) is an XML-based markup language for describing two-dimensional vector graphics. [SVG][SVG] is to graphics essentially what [HTML][HTML] is to text.\n\n[HTML]: https://developer.mozilla.org/en-US/docs/Web/HTML\n[SVG]: https://developer.mozilla.org/en-US/docs/Web/SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"$${annotate(\n `🦉`,\n `SVG is similar to Adobe’s proprietary Flash technology, but it is a text-based open Web standard instead of a closed binary format. It is explicitly designed to work with other Web standards such as CSS and DOM.`\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$${annotate(\n `🔔`,\n `When an SVG is embedded inline, all enclosed CSS rulesets will leak and possibly affect other inline SVGs — especially other instances/variations of itself — on the same HTML document.`\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"$${annotate(\n `🛠️`,\n \"To mitigate this issue, the best and simplest way to embed an SVG into HTML is to use an `` tag; if the SVG includes some form of interactivity, use an `