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?
11
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">