30:T8b4,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. O código *SVG* é construído dentro da *tag* ``, seja em um arquivo `.svg`, ou dentro do código *HTML*: ```html ``` 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* ``, 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"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"
\n\n### Criando um *SVG* com programação\n\n---\n","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"Como todo código, o código *SVG* nada mais é do que uma sequência de caracteres (*string*). Para se gerar uma imagem vetorial através de programação, é necessário apenas que nosso código *javascript* construa um texto que é um código *SVG*.\n\nA função abaixo irá criar uma matriz de pequenos quadrados ao longo de um campo com tamanho definido pelas variáveis `w` e `h`:\n\n```js\ncriaquadmatriz = function(w,h) {\n\n let meusvg = \\`\n `;\n\n // Cria quadrados através de loops em x e y\n for (let ix = 0; ix < w; ix = ix + 20) {\n for (let iy = 0; iy < h; iy = iy + 20) {\n meusvg =\n meusvg +\n `\n \n `;\n }\n }\n\n meusvg = meusvg + ``;\n\n return html`\\${meusvg}`;\n\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"```js\nexemplo1 = criaquadmatriz(700, 300)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"exemplo1 = criaquadmatriz(700, 300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"A função cria quadrados de 10x10 pontos em um espaçamento de 20x20 pontos, desenhando todos os quadrados em cada coluna, e assim passado para a próxima coluna a 20 pontos de distância da atual, até que chegue aos limites tanto de linhas quanto de colunas, definidos pelas variáveis `w` e `h`.\n\nEm nosso exemplo, o elemento *HTML/SVG* criado pela função é atribuído à variável `exemplo1`.\n\nUm dos recursos valiosos do Observable, é a possibilidade de se fazer o download de imagens criadas através de programação. Através do ícone , você terá a opção de baixar a imagem em formato `.png` ou `.svg`.","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"
\n\n### Modificando propriedades de um elemento *SVG*\n\n---\n","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"exemplo2 = criaquadrado()","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof posicao = Inputs.range([0, 500], { step: 1, value: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"setaquadrado(posicao)","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"
\n\n### Por que os *SVG* são importantes no Observable\n\n---\n","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"Muito do que fazemos em notebooks computacionais, como os do Observable, são visualizações de dados (dataviz). As visualizações são, geralmente, criadas utilizando construções gráficas vetoriais, como as que acabamos de gerar neste capítulo.\n\nUma das ferramentas/bibliotecas mais poderosas para a criação de visualizações em javascript é o *Data Driven Documents* (D3), desenvolvida pelo mesmo criador do Observable, e que está integrada a ele nativamente.\n\nAlém do D3, o Observable também conta com a biblioteca *Observable Plot* integrada, mais simples e também mais fácil de ser utilizada do que o D3.\n\nAinda que estas bibliotecas abstraiam boa parte da construção do código *SVG*, é importante entender que o que elas fazem é, precisamente, construir um elemento *SVG* na tela. Entender como ele é construído, e como funciona um *SVG*, facilitará bastante a sua elaboração, mesmo utilizando uma biblioteca para isso.","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"import {\n criaquadmatriz,\n criaquadrado,\n setaquadrado\n} from \"@ranoya/livroobservable-funcoes\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}