redimensionar SVG
☞ roda inteiramente no seu navegador — nada é enviadoSolte seu SVG aqui
ou clique para procurar — somente SVG
Prévia
redimensionar SVG
Dê ao SVG uma nova largura e altura — ou remova as duas para ele acompanhar o contêiner. A arte em si nunca é tocada.
ou clique para procurar — somente SVG
Prévia
nada é redesenhado
Uma imagem raster precisa ser redesenhada no novo tamanho, e nesse processo detalhe se perde ou é inventado. Um SVG carrega as instruções de desenho, então redimensionar é só uma anotação sobre o tamanho em que renderizar. Cada caminho, cor e gradiente do arquivo continua exatamente como estava.
Essa anotação é o par largura e altura. O viewBox por baixo define o sistema de coordenadas interno e fica intocado — e é exatamente por isso que as formas escalam em vez de serem cortadas.
três passos
Escolha um arquivo .svg — ele fica no seu dispositivo.
Digite uma largura, escolha uma porcentagem ou deixe responsivo.
Você recebe a mesma arte no tamanho que pediu.
respostas rápidas
Não. Não há o que borrar — o arquivo descreve formas, não pixels, então é desenhado do zero no tamanho que você pedir. Vale igualmente a 25% e a 400%.
Deixa o SVG responsivo. Sem esses atributos, o navegador recorre ao viewBox para a proporção e deixa o elemento preencher o contêiner, então você define o tamanho pelo CSS. É a escolha habitual para ícones em uma biblioteca de componentes.
Nesse caso, um viewBox é adicionado para você. Sem ele, o SVG trata as próprias coordenadas como pixels puros, então mudar a largura cortaria o desenho ou acrescentaria espaço vazio em vez de escalá-lo. O viewBox adicionado corresponde ao tamanho original, então nada se desloca.
Quase nada — só dois números mudam. Se quiser um arquivo menor, passe pelo otimizador de SVG, que remove metadados do editor e coordenadas com casas decimais demais.
Não. O arquivo é interpretado e reescrito no seu navegador.