2c:null 2d:["$","title",null,{"children":"SVG | Guilherme Ranoya | Observable"}] 32:[] 30:{"id":"f5385809a3e37a00","slug":"livrojavascript-11","title":"SVG","thumbnail":"b2645c1bf129663c4d1b36e5c06201417cfea54318a62c946c1f7f3d844d8cab","access_level":"public","create_time":"$D2024-12-23T19:06:28.018Z","update_time":"$D2025-02-05T23:40:35.088Z","view_time":null,"first_public_time":"$D2024-12-23T19:08:11.750Z","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":113,"publish_version":null,"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":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"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,"subscribed":null,"forks":2,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"SVG","cells":[{"id":0,"value":"# SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"### Contexto gráfico vetorial\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"A maioria dos designers conhecem o padrão *SVG* (*Scalable Vector Graphics*) pelos arquivos `.svg`, utilizados em ferramentas gráficas como Adobe Indesign, Adobe Illustrator, Inkscape ou Figma. O que eles geralmente não sabem é que os arquivos `.svg` guardam, na verdade, códigos em formato de *scripts*, muito parecidos com o código *HTML*; e por utilizarem a mesma estrutura sintática, estes códigos podem ser incluídos diretamente dentro do *HTML*, como parte nativa dele.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"Em síntese, podemos utilizar imagens `.svg` em um documento *HTML*, como fazemos com arquivos `.jpg`, `.png`, `.gif` ou `.webp`, através da tag ``, ou como *background* em elementos *HTML*, mas também podemos incluir uma imagem *SVG* diretamente no *HTML*, escrevendo seu código dentro da tag `
\n\n### Sintaxe\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"O *SVG* usa a sintaxe *XML*, que é a mesma do código *HTML*, formado por *tags* (``) que guardam conteúdos, sendo que estes conteúdos podem (e muitas vezes terão) outras *tags* dentro deles, formando uma estrutura de árvore.\n\nO código *SVG* é construído dentro da *tag* ``, seja em um arquivo `.svg`, ou dentro do código *HTML*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":56,"value":"Lembrando que, por se tratar de um campo vetorial, o *SVG* não possui uma medida física, podendo ser ampliado ou reduzido sem qualquer perda da qualidade. Por conta disso é sempre necessário informar as dimensões na tela através das propriedades `width` e `height` na *tag* `

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":58,"value":"Há um conjunto de `tags` gráficas disponíveis dentro do *SVG*, como ``, ``, ``, ``, `` (grupos), além da possibilidade de construção de máscaras e operações booleanas de união, subtração, intersecção, etc..","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"
\n\n### Programando com *SVG*\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Há dois caminhos possíveis para se utilizar programação com *SVGs*: podemos modificar propriedades de elementos existentes (ou criar novos elementos dentro de um *SVG* já existente), ou podemos escrever o *SVG* inteiro do zero. E claro, podemos criar um *SVG* do zero, e depois modificar a propriedade dos elementos existentes nele.\n\nVamos primeiro modificar propriedades de algo já existente. Para isso será necessário associar o elemento a uma variável com a instrução `document.querySelector()`, e depois modificá-la com a instrução `setAttribute()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":64,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":71,"value":"O elemento que desejamos fazer modificações recebe uma propriedade `id` com o valor `quadrado1` (linha 9), que facilitará para ser manipulado pela programação. Para utilizarmos um elemento do *Document Object Model* (DOM) através do `id`, utilizaremos o seletor `#` para identificá-lo, assim como é feito com *CSS*. Ele é associado então a variável `quad` (linha 21), e sua cor é então modificada com `quad.setAttribute()` (linha 22).\n\n☞ *É importante reforçar que estas modificações não serão incorporadas ao código, e que ao se importar o código SVG em um editor gráfico, o quadrado continuará cinza, como está especificado no seu script.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"Uma outra maneira de se trabalhar a programação com *SVG* é criar todo o elemento com ela. Literalmente é a construção de uma *string* contendo o código, o inserindo dentro de outro elemento do *Document Object Model* (DOM):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":82,"value":"Neste caso, criamos a variável `meusvg` (linha 4), com todo o conteúdo do código *SVG*. Associamos uma `tag div` cujo `id` utilizava o valor `elemento` à variável `elem` (linha 25), e por fim, enxertamos na `tag div`, como seu conteúdo, todo o código *SVG*, através da instrução `elem.innerHTML` (linha 26). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"Este processo de construção pode utilizar de todos os recursos de programação para produzir elementos gráficos de forma mais prática, e em alguns casos, ainda mais prática e menos trabalhosa do que um editor gráfico.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":86,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":88,"value":"Experimente modificar os valores de `w` e `h` para verificar os resultados sobre a construção do *SVG* parametrizado, no exemplo acima.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"
\n\n## Gerando um arquivo *SVG*\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"É possível gerar um arquivo `.svg` para ser baixado após seu código ser construído com programação. Para fazer isso é necessário que o código seja precedido da tipologia MIME certa (`image/svg+xml`), e esteja codificado corretamente.\n\nNo código abaixo, modificamos um link (`tag a`), para que sua referência (propriedade `href`) seja o código *SVG* gerado com javascript. Isto é feito incluíndo o objeto `data`, aplicado a ele o tipo MIME do arquivo, sua codificação (`UTF-8`), e convertendo os caracteres especiais presentes no código para o formato certo com a função `encodeURIComponent()` (linha 26).\n\nApós incluir os dados do arquivo no link, é necessário informar que se trata de um download, e qual o nome *default* para o arquivo a ser baixado com aqueles dados (linha 29).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":99,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":104,"value":"Este recurso pode ser bastante útil quando for necessário criar imagens vetoriais por programação que sejam utilizadas como parte de algo que está sendo construído em um editor gráfico. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":91,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"