Qual resolução os arquivos SVG devem ter?

Os arquivos SVG, ou Scalable Vector Graphics , são imagens que podem ser redimensionadas sem perder a qualidade. Isso os torna ideais para uso na web, onde as imagens geralmente precisam ser exibidas em tamanhos diferentes. Não há uma resposta definitiva para a questão de qual resolução os arquivos SVG devem ter. No entanto, existem algumas diretrizes gerais que podem ser seguidas. Para a maioria dos aplicativos da Web, 72 pixels por polegada é um bom ponto de partida. Essa resolução fornecerá um bom nível de detalhes enquanto ainda permite que a imagem seja redimensionada conforme necessário. Se você precisar fornecer um nível mais alto de detalhes, poderá aumentar a resolução para 150 ou até 300 pixels por polegada. No entanto, lembre-se de que essas resoluções mais altas resultarão em tamanhos de arquivo maiores. Em geral, é melhor manter a resolução dos arquivos SVG o mais baixa possível e, ao mesmo tempo, fornecer o nível de detalhe necessário. Isso minimizará o tamanho do arquivo e facilitará o redimensionamento da imagem conforme necessário.

Quando se trata de gráficos vetoriais, o XML é usado para definir algumas das propriedades básicas, como caminhos, formas, fontes e cores. Considere os seguintes exemplos de casos de uso: UI e ícones de navegação, ilustrações vetoriais, padrões e planos de fundo repetidos. Demonstraremos como o SVG substitui perfeitamente as imagens raster regulares no exemplo a seguir. Como resultado, um ícone ilustrado simples, como um apresentado em interfaces de usuário modernas, seria muito útil. As imagens mostram os conceitos claramente, enquanto o texto pode ser ambíguo. Dispositivos modernos não podem converter uma unidade de pixel CSS em um pixel de dispositivo; em vez disso, eles dobram. Da mesma forma, as imagens já são rasterizadas, então dobrar os pixels não faz muito sentido.

Quando um usuário encontra um site muito pequeno para seu gosto, ele aumenta o zoom. É impossível fornecer imagens pré-rasterizadas em qualquer nível de ampliação. Se você ainda não tem um protótipo, mostraremos como adicionar gráficos dinâmicos ao nosso exemplo. Muitos usuários aumentarão o zoom, mas também não poderão usar um recurso útil do navegador porque os elementos da página são exibidos em tamanhos fixos. Você pode rasterizar um gráfico escalável em qualquer resolução e nível de ampliação e funcionará perfeitamente com todos os dispositivos. Usando tamanhos relativos, o usuário pode continuar a experimentar o design responsivo sem exigir o uso de uma roda de zoom. Além disso, estamos usando o tamanho de fonte padrão do navegador para permitir que nosso design se adapte ao tamanho padrão.

Para fins mais práticos, o SVG substitui outras imagens em planos de fundo CSS e elementos HTML. Ao usar estilos somente do IE, podemos usar uma segunda imagem de plano de fundo CSS de um formato compatível, como PNG. À medida que a imagem de origem muda, o conteúdo da imagem também pode ser atualizado. Seria preferível detectar e usar o suporte SVG somente se ele estiver presente. A maioria dos formatos de imagem bruta, como PNG e JPG, já está compactada em sua extensão máxima. Após a compressão e decodificação, a imagem rasterizada pode ser renderizada pixel a pixel. Sempre que um gráfico vetorial é exibido, ele deve ser rasterizado para uma resolução específica.

Manter a escalabilidade dos estilos visuais e evitar imagens raster é o aspecto mais importante para evitar imagens raster. ícones vetoriais podem ser substituídos por glifos Unicode parecidos, tanto em termos de acessibilidade quanto de compatibilidade semântica. Acredito que é fundamental tornar os sites o mais responsivos possível. Quanto mais pudermos fazer para ser agnósticos de dispositivos, melhor.

A capacidade de redimensionar um arquivo SVG para qualquer tamanho sem perder a qualidade da imagem é um recurso exclusivo. O tamanho de um arquivo SVG não importa porque ele parecerá o mesmo, não importa quão grande ou pequeno seja em seu site. A chave para a escalabilidade é garantir que ela seja contínua.

Qual é a resolução de um arquivo SVG?

A resolução de um arquivo SVG é normalmente de 72 dpi, que é a resolução da maioria das telas de computador. No entanto, como o SVG é um formato vetorial, ele pode ser dimensionado para qualquer tamanho sem perder a qualidade.

As muitas vantagens das imagens SVG

É independente da resolução ou tamanho da tela e, não importa qual tamanho ou resolução você esteja usando, você ainda poderá ver o mesmo arquivo de antes.

Um arquivo SVG é de alta resolução?

Se estiver usando logotipos e gráficos digitais de alta qualidade, convém salvá-los como arquivos PNG ou.VG. Apesar da grande escala, ambos os formatos possuem alta resolução e podem ser usados ​​em diversas situações.

O formato baseado em vetor é conhecido como gráficos vetoriais e pode ser reduzido ou aumentado sem perda de qualidade. Isso o torna muito superior aos tipos de arquivo como PNG e JPEG, que são baseados em dados rasterizados. Um arquivo SVG é muito mais leve que uma imagem raster, além de não ter que lidar com a qualidade e tamanho da imagem. O formato HTML5 SVG é baseado em texto, para que o mecanismo de pesquisa possa ler, rastrear e indexar as imagens com mais rapidez e facilidade. Como resultado, nesse aspecto, os benefícios dos SVGs superam os dos PNGs ou JPEGs, porque os mecanismos de pesquisa só são capazes de reconhecer imagens raster com base em seus metadados, como título, palavras-chave ou ALT. Alguns temas da Shopify, como Be Yours, permitem adicionar algumas seções ou blocos que usam apenas SVGs.

Quando isso ocorre, podem aparecer artefatos como bordas irregulares ou imagens borradas. Em outras palavras, se você criar um SVG para usar em um site, seu navegador simplesmente o exibirá como uma imagem raster, então isso é um problema menor. Você deve, no entanto, considerar isso ao criar um SVG para impressão. Felizmente, existem várias soluções. Usar uma ferramenta de compactação sem perdas como o gzip, por exemplo, pode reduzir o tamanho do arquivo ao criar um SVG com resolução maior do que o necessário. Outra alternativa é usar um SVG baseado em resolução. O SVG será renderizado em uma resolução específica se for especificado em seus parâmetros. Um SVG pode ser criado apenas se for destinado apenas para uso em um dispositivo móvel, como um telefone. Além disso, se estiver criando um SVG para impressão, você pode usá-lo. Além de tamanhos de arquivo menores, SVGs independentes de resolução resultarão em tamanhos de arquivo maiores. Você deve escolher uma imagem de alta qualidade se quiser usá-la na web. É melhor considerar se você precisará usar um SVG com resolução confiável para usar um SVG na impressão.