2d:null 2e:["$","title",null,{"children":"Recursos úteis na construção de SVG | Guilherme Ranoya | Observable"}] 33:T458,34:[] 31:{"id":"3eb8a438370998df","slug":"ndp31-05-2022","title":"Recursos úteis na construção de SVG","thumbnail":"902f956b547d5aa681bf9ae64c50710092f13e042cdc87b89cf407c6d07cb13c","access_level":"public","create_time":"$D2022-05-30T13:51:10.540Z","update_time":"$D2022-06-01T01:25:43.100Z","view_time":null,"first_public_time":"$D2022-05-30T16:07:15.964Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":128,"publish_version":128,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"622ff72087e57623","slug":"creative-coding","title":"Creative Coding","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Recursos úteis na construção de SVG","cells":[{"id":0,"value":"# Recursos úteis na construção de SVG\nReferências e códigos utilizados como exemplos na apresentação do Noite de Processing, 31/05/2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"Arquivos `.svg`, assim como as tags `
\n## SVG + CSS\nUm dos recursos mais interessantes no uso de **SVG** é que podemos declarar as propriedades dos elementos através do código **CSS**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"Neste exemplo, tanto as propriedades de tamanho e cor do retângulo de fundo são definidos por uma propriedade `style` na tag ``, quanto as propriedades da linha são definidos por uma classe CSS `minhalinha`, declarada na propriedade `class` da tag ``, e definidas dentro da tag `\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"
\n## SVG + JS\n\n##### Atenção: O Observable não é capaz de rodar códigos javascript inseridos via `","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"Considerando que uma tag ou o código **SVG** é apenas uma `String`, é possível modificar o que está contido em um elemento **SVG** injetando nele o código que se deseja:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"Versão adaptada para o Observable:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"html`${injectsvg()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"injectsvg = function () {\n let conteudo = ``;\n\n return conteudo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"