Redimensionando SVG em html?

Então, eu tenho um arquivo SVG em HTML, e uma das coisas que ouvi sobre o formato é que ele não fica todo pixelizado quando você o aproxima.

Eu sei com um jpeg ou o que quer que eu possa armazená-lo como um ícone de 50 por 50 e, em seguida, exibi-lo como uma miniatura (bastante pixelizada) de 100 por 100 (ou 10 por 10), definindo manualmente a altura e a largura no image_src tag.

No entanto, os arquivos SVG parecem ser usados ​​com as tags de objeto / incorporação e a alteração da altura ou largura de THOSE apenas resulta em mais espaço alocado para a imagem.

Existe alguma maneira de especificar que você deseja que uma imagem SVG seja exibida menor ou maior do que realmente é armazenada no sistema de arquivos?

Abra seu .svgarquivo com um editor de texto (é apenas XML) e procure algo assim no topo:

<svg ... width="50px" height="50px"...

Apague os atributos de largura e altura; os padrões são 100%, portanto, ele deve se estender para o que o contêiner permitir.

Tente esse:

1. Defina a caixa de visualização ausente e preencha os valores de altura e largura dos atributos de altura e altura definidos na tag svg

2. Em seguida, redimensione a imagem simplesmente definindo a altura e a largura para os valores percentuais desejados . Boa sorte.

3. Defina uma proporção fixa com preserveAspectRatio="X200Y200 meet(por exemplo, 200px), mas não é necessário

por exemplo

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

você pode redimensioná-lo exibindo svg na tag de imagem e no tamanho da tag de imagem, ou seja

<img width="200px" src="lion.svg"></img>

Alterar a largura do contêiner também o corrige, em vez de alterar a largura e a altura do arquivo de origem.

.SvgImage img{ width:80%; }

Isso corrige meu problema de redimensionar o svg. você pode dar qualquer% com base em sua exigência.

Eu achei melhor adicionar viewBoxe preserveAspectRatioatribuir aos meus SVGs. A caixa de visualização deve descrever a largura e a altura completas do SVG no formato 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Use o seguinte código:

<g transform="scale(0.1)">
...
</g>

Aqui está um exemplo de como obter os limites usando svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

No final, você obtém números que você pode conectar ao svg para definir a caixa de exibição corretamente. Em seguida, use qualquer css na div pai e pronto.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Eu tenho um arquivo SVG em HTML [...] Existe alguma maneira de especificar que você deseja que uma imagem SVG seja exibida menor ou maior do que realmente é armazenada no sistema de arquivos?

Os gráficos SVG, como outros trabalhos criativos, são protegidos pela lei de direitos autorais na maioria dos países. Dependendo da jurisdição, licença do trabalho ou se você é ou não o detentor dos direitos autorais, talvez não seja possível modificar o SVG sem violar a lei de direitos autorais , acredite ou não.

Mas leis são tópicos complicados e, às vezes, você só quer fazer merda. Portanto, você pode ajustar a escala do gráfico sem modificar o trabalho em si usando a imgtag com widthatributo em seu HTML.

Usando uma solicitação HTTP externa para especificar o tamanho:

<img width="96" src="/path/to/image.svg">

Especificando o tamanho na marcação usando um URI de Dados :

<img width="96" src="data:image/svg+xml,...">

Os SVGs podem ser otimizados para URIs de dados para criar imagens SVG Favicon adequadas para qualquer tamanho:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">