Existe algum conceito de tamanho em um SVG?


11

Eu queria saber sobre arquivos SVG. Eu sei que é uma coleção de vetores definidos por tags de caminho em XML, portanto, por que ela possui largura e altura em pixels na tag svg e se removemos essas dimensões?

Respostas:


15

Largura e altura são relevantes apenas quando viewBoxdefinidas. Sem esse atributo, você pode excluir com segurança a largura e a altura. Ele sempre será exibido na escala em que foi desenhada. Se um <rect>conjunto tiver 10px de largura e 20px de altura, será exibido nessa escala 10x20 com ou sem largura ou altura quando nenhum viewBox estiver definido.

Se um viewBoxatributo estiver definido, você poderá usar a largura e a altura para ajustar a escala original para cima ou para baixo.

Sem largura e altura, mas o viewBox configurado, isso permitirá que o svg seja escalado infinitamente, o que pode ou não ser o comportamento desejado. Em uma página HTML responsiva, isso geralmente é desejado. Ele aumentará ou diminuirá para caber no contêiner delimitador.

São os mesmos

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

Isso dobra a escala original.

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

Isso permite dimensionamento infinito

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.