Sobre esta ferramenta
A Calculadora viewBox ajuda a distinguir as coordenadas internas das dimensões de apresentação. Introduza um viewBox para consultar a origem e o tamanho ou preencha os quatro valores para gerar o atributo, mesmo sem um ficheiro SVG.
Como utilizar
- Introduza um viewBox existente ou leia a área de coordenadas de um ficheiro ou código SVG.
- Verifique os valores mínimos de X e Y e a largura e altura internas.
- Ajuste a área de coordenadas e, se desejar, introduza as dimensões de apresentação para comparar a proporção.
- Copie o atributo viewBox gerado e confirme que a imagem permanece totalmente visível.
Funcionalidades
- Aceita origens positivas ou negativas. A largura e a altura internas têm de ser superiores a zero.
- Mostra a proporção: por exemplo, 0 0 800 600 corresponde a 4:3.
- Compara as coordenadas internas com as dimensões de apresentação para identificar escalas uniformes ou proporções diferentes.
Compreender o sistema de coordenadas
- A ordem do viewBox é min-x, min-y, width, height. Os dois primeiros números indicam a origem da área visível; os outros dois indicam a largura e a altura dessa área.
- Por exemplo, -100 -50 200 100 define uma área com origem em (-100, -50), largura 200 e altura 100, com proporção 2:1.
- Com uma área de apresentação de 400 × 300 e viewBox 0 0 800 600, cada unidade interna corresponde a 0.5 píxeis CSS nas duas direções. Se as proporções diferirem, as margens ou o recorte dependem também de preserveAspectRatio.
Segurança dos ficheiros SVG
A pré-visualização utiliza uma cópia estática filtrada: não executa scripts, eventos de clique ou animações, nem carrega imagens, tipos de letra ou estilos externos. Referências externas, páginas incorporadas e conteúdo não suportado são removidos, pelo que a imagem pode diferir do original. Documentos com DOCTYPE ou entidades personalizadas não são suportados.
O ficheiro SVG ou código UTF-8 pode ter até 2 MiB, 20000 nós (incluindo elementos e texto) e 96 níveis de profundidade. Se o conteúdo for demasiado grande ou complexo, simplifique primeiro o ficheiro.
Privacidade
O conteúdo SVG é processado apenas no seu navegador e não é enviado para um servidor.
A ferramenta não guarda automaticamente o conteúdo nem os resultados. Descarregue o que pretende conservar antes de limpar ou sair da página e mantenha uma cópia do original.
Perguntas frequentes
O que significam os quatro números do viewBox?
São, por ordem, X mínimo, Y mínimo, largura interna e altura interna. A origem pode ser negativa, mas a largura e a altura têm de ser superiores a zero.
O que significa viewBox="0 0 100 100"?
Define uma área de 100 × 100 com origem em (0, 0), com proporção 1:1. O tamanho apresentado em píxeis depende das dimensões exteriores.
Como se relacionam viewBox, width e height?
viewBox define as coordenadas internas, enquanto width e height definem a área de apresentação. O navegador adapta as coordenadas internas a essa área.
O que é preserveAspectRatio?
Define o alinhamento e a escala quando as proporções diferem. meet mostra a imagem inteira e pode deixar margens; slice preenche a área e pode recortar; none permite escalas diferentes nas duas direções.