Redimensionando SVG em html?


157

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?

Respostas:


178

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.


75
Sim, está certo, mas você também precisa adicionar um atributo 'viewBox' (por exemplo, viewBox = "0 0 50 50" no seu exemplo de 50x50px); caso contrário, o conteúdo poderá não ser dimensionado corretamente (dependerá das dimensões do contêiner). O Scour fará isso por você automaticamente, codedread.com/scour .
Erik Dahlström

Viva! Isso ajudou! Eu já tinha 100% de coisas no arquivo, mas a caixa de exibição era a chave! Obrigado a ambos!
Jenny

26
Caso não seja óbvio para mais ninguém, 'viewBox' faz distinção entre maiúsculas e minúsculas. Além disso, as duas primeiras coordenadas são o canto superior esquerdo, se você estiver cortando a imagem, e as duas primeiras coordenadas são a largura e a altura antes da escala.
Big McLargeHuge

1
Observe que <div style = "width: 50px; height: 50px"> <svg viewBox = "0 0 1000 1000"> ... </svg> </div> e <svg viewBox = "0 0 1000 1000" style = "width: 50px; height: 50px"> ... </svg> funcionará.
widged

48

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

24

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>

1
O problema que penso ao usar <img> é que você perde os recursos de failover da tag <object> (que podem ser relevantes para os usuários do IE na versão 8 e abaixo).
Nathan Crause

10

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.


8

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>

2
Esta é a melhor opção honestamente. Funciona como um encanto.
Justin

6

Use o seguinte código:

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

4

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);

1

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">
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.