44:["$","title",null,{"children":"Quadbits Studio Emblem | Quadbits Studio | Observable"}] 4c:T47c,// pristine version… svg``4d:T48a,// clone pristine version… svgAsObject``4e:T4d3,(await visibility(), svgAsObject``)4f: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

50:[] 48:{"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-10-20T10:00:12.325Z","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","bio":"“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” ― Antoine de Saint-Exupéry","followed_by_you":false,"follows_you":false},"version":94,"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,"bio":"Over three decades of experience on the Web… “Don’t wait for inspiration. It comes while one is working.” ― Henri Matisse","followed_by_you":false,"follows_you":false}],"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":0,"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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"// blueprint\nsvgAsImage``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"$4f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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 `