diff --git a/svgpocketguide-ptbr.md b/svgpocketguide-ptbr.md index 90a0f14..bf28d4f 100644 --- a/svgpocketguide-ptbr.md +++ b/svgpocketguide-ptbr.md @@ -135,9 +135,12 @@ Esses atributos especificam ao *browser* a [versão do SVG](http://www.w3.org/TR Vamos dar uma olhada nestes atributos agora, em um exemplo de código SVG gerado pelo Illustrator, para garantir que isso não irá deixá-lo surpreso quando começar: - - - +```xml + + + +``` + Na maioria dos casos o DOCTYPE e seus atributos dentro do elemento `` não são essenciais para que seu gráfico seja renderizados e podem ser descartados, com o objetivo de "limpar" seu código. @@ -161,9 +164,12 @@ Além disso tudo, você pode também copiar o código como está, colar dentro d Finalmente, alguns exemplos irão conter porções de gráficos com códigos comentados a fim de minimizar o tamanho do bloco de código quando aquela porção particular não é essencial para a explicação do tópico em si. - - - +```xml + + + +``` + ## Seção 1. Organização do documento @@ -210,15 +216,18 @@ Gráficos são definidos com o `` e podem ser utilizados no decorrer do do Por exemplo, o seguinte código desenha um gradiente muito simples em um retângulo: - - - - - - - - - +```xml + + + + + + + + + +``` + O conteúdo de `` não tem saída visual até que seja chamado pela sua referência única, o `id`, que neste caso está sendo feito através do atributo `fill` do retângulo. @@ -236,35 +245,41 @@ A ordem de empilhamento do SVG não pode ser manipulada pelo `z-indez` no CSS co As uvas e a melância estão no mesmo elemento `` abaixo. A melância aparece a frente das uvas porque o grupo que contém o caminho que faz seu desenho está listado antes das uvas no documento. - - - - - - - - - - - - +```xml + + + + + + + + + + + + +``` + ![Melância e uvas empilhadas, melância na frente](images/stackedfirst.png) Se o grupo que contém as uvas for movido para o fim do documento, ele irá aparecer então na frente da melância. - - - - - - - - - - - - +```xml + + + + + + + + + + + + +``` + ![Melância e uva empilhadas, uvas na frente](images/stackingtwo.png) @@ -285,9 +300,11 @@ O SVG possui os seguintes elementos que compõe as formas básicas: retângulos, O elemento `` é usado para definir o retângulo. - - - +```xml + + + +``` ![Retângulo](images/basicrect.png) @@ -302,9 +319,11 @@ Também é possível criar cantos arredondados espeificando valores com os atrib O elemento `` é usado para definir um círculo mapeado com base em um ponto central e pelo tamanho de seu raio. - - - +```xml + + + +``` ![Círculo Básico](images/basiccircle.png) @@ -316,10 +335,11 @@ O atributo `r` define o tamanho do raio do circulo. O elemento `` define uma elipse na qual seu mapeamento basea-se em um ponto central e dois raios. - - - - +```xml + + + +``` ![Elipse](images/basicellipse.png) @@ -329,9 +349,11 @@ Enquanto os valores `cx` e `cy` estabelecem um ponto central baseado na distânc O elemento `` define uma linha simples com um ponto inicial e um ponto final. - - - +```xml + + + +``` ![Line](images/basicline.png) @@ -341,9 +363,11 @@ Juntos, os valores `x1` e `y1` estabelecem as coordenadas para o ponto de inicio O elemento `` é usado para definir um conjunto de linhas simples interligadas que, geralmente, resultam em um formato aberto (os pontos de início e fim não são conectados). - - - +```xml + + + +``` ![Polyline](images/basicpolyline.png) @@ -355,9 +379,11 @@ Qualquer número diferente de entradas aqui, retornará erro. O elemento `` é usado para definir uma forma fechada, que consistem em linhas conectadas. - - - +```xml + + + +``` ![Polygon](images/basicpolygon.png) @@ -379,9 +405,12 @@ Estes dados são incluídos no atributo `d` acompanhado de instruções sobre o O elemento `` abaixo contém as coordenadas específicas para renderização de um limão: - - - +```xml + + + +``` + ![Path do Limão](images/pathlime.png) @@ -437,9 +466,12 @@ Os comandos S e s também irão desenhar uma curva cúbica de Bézier, mas neste O seguinte código desenha uma curva cúbica de Bézier básica: - - - +```xml + + + +``` + Manipulando o primeiro e o último conjunto de pontos para essa curva, irá impactar na localização do seu início e fim, enquanto manipular os dois pontos centrais, irá impactar na forma e posicionamento da curva em si. @@ -458,9 +490,11 @@ As Curvas Quadráticas de Bézier (Q, q, T, t) são similares as Curvas Cúbicas O seguinte código desenha uma curva quadrática de Bézier básica: - - - +```xml + + + +``` Manipulando o primeiro e último conjunto de valores, `M20,50` e `100,50`, irá impactar no posicionamento dos pontos de início e fim da curva. O conjunto central dos valores, `Q40,5`, define o ponto de controle da curva, estabelecendo sua forma. @@ -476,9 +510,12 @@ Uma curva elíptica (A, a) define um segmento de uma elipse. Esses segmentos sã Aqui está um código de um curva elptica básica: - - - +```xml + + + +``` + O primeiro e último conjunto de valores dentro do *path*, `M65,10` e `50,25`, representam as coordenadas inicial e final, enquanto o segundo conjunto de valores definem os dois raios. O valor de `1.0` (*large-arc-flag* e *sweep-flag*) determina como o arco será desenhado, a partir das quatro diferentes opções. @@ -495,16 +532,19 @@ Uma vez que o desenho estiver completo, o código XML gerado, que pode ser um po Aqui está o código SVG de algumas cerejas com classes adicionadas para melhor navegação: - - - - - - - - - - +```xml + + + + + + + + + + +``` + ![Cerejas](images/embedcherry.png) @@ -520,9 +560,12 @@ Entender o *workspace* do SVG é útil para saber como renderizar propriamente s Esta pêra, felizmente possui a *viewport* e `viewBox` que correspondem um com o outro: - - - +```xml + + + +``` + ![Pêra](images/viewboxpear1.png) @@ -546,17 +589,23 @@ Se nós optarmos por não definir a `viewBox` a imagem não será redimensionada Se 50px forem tirados de `width` e `height` da `viewBox`, a porção da imagem da pêra que está visível é reduzida, porém a parte que ainda pode ser visualizada se encaixa nas definições da *viewport*. - - - +```xml + + + +``` + ![Pêra](images/viewboxpear2reduced.png) Os valores de `min` dentro da `viewBox` definem o início da `viewBox` dentro de seu elemento pai. Em outras palavras, os pontos dentro da `viewBox` são as coordenadas no qual iremos criar o campo de visualização. No desenho da pêra acima os valores de `min` eram 0,0 (topo, esquerda). Vamos mudar esses valores para 50, 30: `viewBox="50 30 115 190"`. - - - +```xml + + + +``` + ![Pêra](images/viewboxpearminval.png) @@ -576,33 +625,45 @@ Existem três opções de ``: `meet` (padrão), `slice`, e `none`. Talvez o valor mais inapropriado aqui é o *none*, no qual estabelece uma escala uniforme que talvez não deveria ser aplicada. Se aumentarmos os valores em pixels da *viewport*, a imagem abaixo das cerejas vai se tornar não uniforme e ficará distorcida. - - - +```xml + + + +``` + ![Cerejas](images/preserverationone.png) Já o `preserveAspectRatio` da imagem abaixo está configurado para `xMinYMax meet` no qual está alinhado ao canto inferior esquerdo da *viewport*. O `meet` se certifica que a imagem está redimensionada para se encaixar dentro da *viewport* da melhor maneira possível. - - - +```xml + + + +``` + ![Cerejas](images/preserveaspect2.png) Aqui nós temos as mesmas cerejas quando `meet` é mudado para `slice`: - - - +```xml + + + +``` + ![Cerejas](images/preserveslice.png) Perceba que os valores de alinhamento não precisam ser corrigidos. - - - +```xml + + + +``` + ![Cherries](images/preservenocorrelate.png) @@ -743,11 +804,13 @@ O valor de `inherit` irá direcionar o elemento para receber o `stroke-linecap` A haste na imagem seguinte tem o `stroke-linecap` com o valor `square`: - - - - - +```xml + + + + + +``` ![Uvas](images/strokesquarestem.png) @@ -759,11 +822,13 @@ O `stroke-linejoin` define qual aparência os cantos dos contornos irão possuir Segue um exemplo das com uvas com um `stroke-linejoin` no valor `"bevel"`: - - - - - +```xml + + + + + +``` ![Uvas](images/strokebevel.png) @@ -800,11 +865,13 @@ A primeira imagem mostra o impacto que um número par de valores faz no caminho O `stroke-dashoffset` especifica a distância para o traço iniciar. - - - - - +```xml + + + + + +``` ![Uvas](images/strokedashoffset.png) @@ -835,9 +902,11 @@ A primeira letra dentro do elemento `` é renderizada de acordo com o esta Enquanto `x` e `y` estabelecem coordenadas em um espaço absoluto, `dx` e `dy` estabelecem em coordenadas relativas. Isto é especialmente útil quando usado em conjunto com o elemento ``, que será discutido futuramente na próxima seção. - - Watermelon - +```xml + + Watermelon + +``` ![Texto Watermelon](images/watermelontext1.png) @@ -851,10 +920,11 @@ Um valor único com o atributo `rotate` resulta em cada símbolo rotacionado por O texto abaixo teve uma rotação definida para todo o gráfico atráves do elemento `transform`, mas também possui um valor para cada símbolo: `rotate="20,0,5,30,10,50,5,10,65,5"` - - - Watermelon - +```xml + + Watermelon + +``` ![Texto Watermelon](images/watermelonrotation.png) @@ -864,9 +934,11 @@ O atributo `textLength` especifica o comprimento do texto. O comprimento do text O seguinte exemplo tem um valor de `textLength` de 900px. Perceba que o espaço entre os caracteres foi aumentado para preencher este espaço. - - Watermelon - +```xml + + Watermelon + +``` ![Texto Watermelon](images/watermelonspacing.png) @@ -890,12 +962,14 @@ No exemplo abaixo "are" e "delicious" estão localizados em diferentes elementos Enquanto "are" está posicionado -30px de "Watermelons", "delicious" está posicionado 50px de "are". - - Watermelons - are - delicious - - +```xml + + Watermelons + are + delicious + + +``` ![Texto Watermelon](images/watermelontspan.png) @@ -919,9 +993,11 @@ O valor de `auto` indica que o espaço entre os símbolos deve ser baseado na ta O exemplo abaixo tem um valor de `kerning` definido em `auto`, que neste caso não tem impacto visual, já que é um valor padrão. - - Oranges - +```xml + + Oranges + +``` ![Texto Oranges](images/orangekerning.png) @@ -937,9 +1013,11 @@ O `letter-spacing` tem opções de valores como `normal`, ``, ou `inheri A propriedade `word-spacing` especifica o espaço entre as palavras. - - Oranges are Orange - +```xml + + Oranges are Orange + +``` ![Texto laranjas](images/orangewordspace.png) @@ -971,14 +1049,17 @@ O `` irá chamar um caminho escolhido a partir de sua `id` que estará A sintaxe básica: - - - - - - Place text here - - +```xml + + + + + + Place text here + + +``` + Aqui como fica o caminho que é feito no código abaixo: @@ -988,14 +1069,16 @@ Após gerar esse caminho no programa de vetor gráfico, o elemento *``* do ![Caminho simples com texto](images/pathsimpletext.png) - - - - - - There are over 8,000 grape varieties worldwide. - - +```xml + + + + + + There are over 8,000 grape varieties worldwide. + + +``` ##### xlink:href @@ -1009,16 +1092,17 @@ O exemplo abaixo tem um `startOffset` de "20%" que irá empurrar o texto para co Adicionando cor ao contorno do caminho via elemento `` pode ajudar a entender exatamente o que acontece. - - - - - - - There are over 8,000 grape varieties worldwide. - - - +```xml + + + + + + + There are over 8,000 grape varieties worldwide. + + +``` ![Caminho simples com texto](images/pathsimpletext2.png) @@ -1030,14 +1114,16 @@ Existem dois tipos de gradientes SVG: linear e radial. Gradientes lineares são Um gradiente linear muito simples é estruturado da seguinte forma: - - - - - - - - +```xml + + + + + + + + +``` O `` contém o elemento `` que nos permite criar definições reutilizáveis que podem ser chamadas depois. Essas definições não tem saída visual até que sejam referenciadas usando sua ID única dentro dos atributos de contorno e/ou preenchimento para as formas do SVG ou ``. Essas formas e/ou texto devem estar dentro do elemento ``, mas fora do elemento ``. @@ -1053,15 +1139,17 @@ Pontos de parada ou *`` nodes* também podem aceitar parâmetros de opacid Aqui abaixo está o código para um gradiente linear simples com duas cores aplicado em um retângulo: - - - - - - - - - +```xml + + + + + + + + + +``` ![Gradiente Básico](images/gradientpic1.png) @@ -1095,7 +1183,9 @@ O atributo `gradientTransform` é opcional e permite uma transformação futura ##### xlink:href O atributo `xlink:href` permite ao usuário chamar o ID de outros gradientes a fim de "herdar" seus detalhes, mas você também pode sobrescrever valores diferentes. - +```xml + +``` Este gradiente herda os detalhes do primeiro gradiente do inicio desta seção, porém possui um método alternado no valor `spreadMethod`. @@ -1113,24 +1203,26 @@ Os atributos `fx` e `fy` representam as coordenadas para o ponto focal do gradie Conforme citado acima, enquanto por padrão o ponto de foco do gradiente deverá ser o ponto central, os atributos podem alterar isso. Por exemplo os valores do ponto de foco da imagem abaixo são fx="95%" fy="70%"`. - - - - - - - - - - - - - - - - - Cherry - +```xml + + + + + + + + + + + + + + + + + Cherry + +``` ![Ponto de foco](images/gradientfocalpoint.png) @@ -1142,15 +1234,16 @@ Texturas são geralmente consideradas uma das mais complexas opções de pintura Aqui está a sintaxe básica de uma textura aplicada a um retângulo. - - - - - - - - +```xml + + + + + + + + +``` ![Textura Básica](images/patternbasic1.png) @@ -1181,24 +1274,19 @@ Definindo `patternUnits=userSpaceOnUse` dentro do elemento `` simplific Texturas também podem ser aninhadas para criar um design mais único e detalhado. Aqui está um exemplo básico de uma estrutura aninhada. - - - - - - - - - - - +```xml + + + + + + + + + + + +``` O elemento `` contém ambas as texturas. Com o elemento ``, a textura do retângulo está chamando a textura do circulo pelo `fill` e o retângulo principal está então chamando própria textura também via `fill`, pintando o interior da forma principal formando um efeito aninhado. @@ -1216,13 +1304,15 @@ Abaixo estão os formatos ainda sem a aplicação da máscara, configurada para Agora temos um visual de como ficaria o código para aplicar o texto "Apples" neste *canvas*. - - - Apples - - - - +```xml + + + Apples + + + + +``` ![Texto com recorte aplicada](images/clippingtext.png)