SVG Viewport e viewBox (para iniciantes completos)

Neste tutorial rápido de viewport e viewbox SVG, vamos detalhar exatamente qual viewport e viewBox estão em SVG para a web. Você vai aprender:

• A diferença entre a janela de visualização e viewBox
• Os aspectos de seus SVGs que você pode controlar com cada
• Como cada um deles é aplicado

Vamos começar!

Viewport ou viewbox?

Janela de visualização SVG

Se você literalmente quebrar a palavra “viewport” você terá uma dica sobre seu papel no SVG; ele cria uma “porta” através da qual você pode “visualizar” uma seção de um SVG. Você pode imaginar isso como algo semelhante a uma janela de vigia através da qual você pode ver o mundo além.

Assim como em uma janela, o tamanho da janela de visualização determina o quanto você pode ver, mas não define o tamanho de qualquer coisa que possa ser visível através dessa janela. O que está do outro lado teoricamente poderia ser de qualquer tamanho.

Por exemplo, você pode ter uma forma em seu gráfico que é 100px por 100pxmas se você definir a janela de visualização SVG para 50px por 50px você verá apenas uma parte dessa forma. O tamanho da janela de visualização é definido adicionando width e height atributos para o svg elemento, assim:

No primeiro SVG vemos todo o 100px por 100px círculo, mas no segundo SVG quando definimos o tamanho da nossa janela de visualização para 50px por 50px vemos apenas um quarto do círculo.

Caixa de visualização SVG

o viewBox pode ser pensado da mesma forma que a janela de visualização, mas com dois recursos extras: ele pode “pan” e pode “zoom”. Com base na analogia do “olhar através do vidro”, se a janela de visualização é como uma janela, o viewBox é como um telescópio.

Parâmetros da caixa de visualização

Vamos falar sobre o zoom SVG. Nós controlamos o viewBox adicionando-o como um atributo ao svg elemento, com um valor composto por quatro números separados por espaço:

viewBox =    

Os dois primeiros números definem a posição do viewBox, que consideraremos como “panorização”. Os dois últimos números definem as dimensões do viewBoxque consideraremos como “zoom”.

Observação: assim como o svg elemento, o viewBox atributo também pode ser usado nos elementos symbol, marker, pattern e view.

Zoom SVG

Começaremos olhando para “zoom”, que podemos fazer com os dois últimos viewBox parâmetros: width e height respectivamente. Vamos deixar os dois primeiros parâmetros em 0 0 por enquanto.

Se esses dois últimos parâmetros tiverem as mesmas dimensões que a janela de visualização, não haverá zoom in ou out, então nada será alterado. Dê uma olhada no SVG número 3, por exemplo:

Mas se fizermos esses dois números maiores do que as dimensões da janela de visualização, efetivamente diminuiremos o zoom, e se os diminuirmos, aumentaremos o zoom.

No SVG número 4 no exemplo acima, definimos o viewBox width e height para 100, que é o dobro do tamanho da nossa viewport. Isso “diminui o zoom” e mostra o dobro do conteúdo, revelando novamente todo o círculo.

No quinto SVG nosso viewBox está definido para um width e height do 25, que é metade do tamanho da nossa janela de visualização. Este zoom SVG viewBox “aumenta”, mostrando metade da quantidade de conteúdo.

Panorâmica

Os dois primeiros viewBox parâmetros permitem que você “pane” definindo onde o canto superior esquerdo do viewBox deveria estar. O primeiro número controla a posição horizontal e o segundo controla a posição vertical.

• Para deslocar para a direita, aumente o primeiro número.
• Para deslocar para a esquerda, diminua o primeiro número.
• Para deslocar para baixo, aumente o segundo número.
• Para fazer uma panorâmica, diminua o segundo número.

Dê uma olhada em como esse panning funciona neste exemplo. Para lembrá-lo, o SVG número 3 tem um 50 por 50 janela de visualização, o viewBox é adicionado, mas sem panorâmica ou zoom. O número 6 é o mesmo, mas deslocado para a direita e para baixo:

Panorâmica e Zoom Juntos

Você pode, é claro, fazer panorâmica e zoom ao mesmo tempo, usando todos os quatro parâmetros de uma só vez, por exemplo:

Ao usar o viewBox, defina sua viewport

Sempre que você usar o viewBox atributo, lembre-se de definir também as dimensões da sua janela de visualização. Caso contrário, o padrão será 100% e você provavelmente terá um gráfico superdimensionado:

SVG ViewBox explicado em poucas palavras

Vamos resumir tudo em alguns pontos:

• A janela de visualização é como uma janela que você olha para ver o conteúdo de um SVG.
• o viewBox é semelhante ao viewport, mas você também pode usá-lo para “pan” e “zoom” como um telescópio.
• Controle a janela de visualização através width e height parâmetros no svg elemento.
• Controle o viewBox adicionando o atributo viewBox para o svg elemento. Também pode ser usado nos elementos symbol, marker, pattern e view.
• o viewBox o valor do atributo é composto por quatro parâmetros separados por espaço.
• Os dois primeiros viewBox os parâmetros controlam o “panning” e os dois últimos controlam o “zooming”.
• Aumente o primeiro parâmetro para “pan” para a direita, diminua para “pan” para a esquerda.
• Aumente o segundo parâmetro para “pan” para baixo, diminua para “pan” para cima.
• Faça o viewBox dimensões, ou seja, os dois últimos parâmetros, maiores que os da janela de visualização para “reduzir” e menores para “aumentar”.

Espero que ajude a esclarecer as águas às vezes turvas do SVG viewport e viewBox. Feliz criação de SVG!

Onde encontrar os principais ícones SVG em 2021

Você conhece o básico da viewport SVG e da viewBox SVG. Cobrimos o que é um viewBox e como ajustar o zoom SVG e outros parâmetros.

Agora, você está se perguntando onde obter ícones SVG profissionais para usar em seus projetos? Confira Envato Elements.

Este mercado baseado em assinatura oferece downloads ilimitados de ícones SVG. Esta é uma ótima oferta se você for um programador, web designer ou artista digital. Você terá acesso ilimitado a modelos da web, temas do WordPress, modelos de CMS, fotos e muito mais!

Saiba mais sobre SVG e Web Design

Explicamos o SVG viewBox, tudo sobre os parâmetros de zoom do SVG viewBox e muito mais. Se você quiser saber mais sobre SVG para web design, esses são ótimos recursos.

Nota Editorial: Este post foi atualizado com contribuições de Maria Villanueva. Maria é redatora da Envato Tuts+.