4

Não tenho muita experiência com SVG, e acho bem confuso a forma de trabalhar com essas imagens, eu preciso deixar essa imagem com o tamanho de 35x35 px.

Exportei o código no illustrator de uma imagem SVG de 512x512px, quero trabalhar com ela de forma responsiva, mas não consigo manipular o tamanho dela por CSS de jeito nenhum.

    <svg width="35" height="35" viewbox="0 0 35 35">

        <path d="M256,0C114.609,0,0,114.609,0,256s114.609,256,256,256s256-114.609,256-256S397.391,0,256,0z M256,472
c-119.297,0-216-96.703-216-216S136.703,40,256,40s216,96.703,216,216S375.297,472,256,472z M325.906,306.188c-16-2.734-37.906-18.25-37.906-24.984v-17.016c0-6.344,8.594-18.219,12.25-29.156
c0.344-1.031,2.547,0.156,4.688-2.453c4.031-4.969,4.625-12.516,5.547-15.953c1.469-5.406-5.094-5.625-5.094-5.625
s4.891-28.375,0.547-46.297c-5.875-24.406-37.5-36.703-49.875-36.703c-12.391,0-43.969,12.297-49.875,36.703
c-4.344,17.922,0.656,46.297,0.656,46.297s-6.328,0.219-4.875,5.625c0.938,3.438,1.969,10.984,6.031,15.953
c2.125,2.609,3.406,1.422,3.75,2.453c3.656,10.938,12.25,22.812,12.25,29.156v17.016c0,6.734-21.922,22.25-37.922,24.984
c-20.547,3.5-30.703,17.703-25.891,53.125c2.406,17.688,49.094,25.297,95.344,24.641c46.25,0.656,93.641-6.953,96.047-24.641
C356.406,323.891,346.469,309.688,325.906,306.188z"/>

    </svg>
2
  • Para a maioria dos casos, precisa setar o parâmetro "preserveAspectRatio". Consulte esse tópico: pt.stackoverflow.com/questions/75877/tornar-svg-responsivo 25/07/2015 às 3:53
  • preserveAspectRatio não tem efeito sem viewBox... e, mais uma vez, líquido não é responsivo... Outro ponto, "preserveAspectRatio", mesmo sem especificar, possui o valor padrão "xMidYMid meet". Por isso, a "falsa" impressão de que não necessita. 26/07/2015 às 20:02

1 Resposta 1

6

Primeiro, remova a largura (width) e altura (height) do elemento SVG.

Depois disso determine uma viewBox relativo a imagem no seu caso viewbox="0 0 512 512".

Com isso basta para assegurar que ele possua o tamanho máximo de onde se encontrar, basta definir no CSS o width como máximo (ou 100%). Assim, a imagem vai adquirir o tamanho máximo de onde você adicionar.

Como no seu caso você quer aplicar um tamanho específico (35px), basta definir a altura e largura com essa medida ou qualquer outra que você queira.

Após isso seu código ficará da seguinte forma:

svg {
  width: 35px;
  height: 35px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
  <path d="M256,0C114.609,0,0,114.609,0,256s114.609,256,256,256s256-114.609,256-256S397.391,0,256,0z M256,472
c-119.297,0-216-96.703-216-216S136.703,40,256,40s216,96.703,216,216S375.297,472,256,472z M325.906,306.188c-16-2.734-37.906-18.25-37.906-24.984v-17.016c0-6.344,8.594-18.219,12.25-29.156
c0.344-1.031,2.547,0.156,4.688-2.453c4.031-4.969,4.625-12.516,5.547-15.953c1.469-5.406-5.094-5.625-5.094-5.625
s4.891-28.375,0.547-46.297c-5.875-24.406-37.5-36.703-49.875-36.703c-12.391,0-43.969,12.297-49.875,36.703
c-4.344,17.922,0.656,46.297,0.656,46.297s-6.328,0.219-4.875,5.625c0.938,3.438,1.969,10.984,6.031,15.953
c2.125,2.609,3.406,1.422,3.75,2.453c3.656,10.938,12.25,22.812,12.25,29.156v17.016c0,6.734-21.922,22.25-37.922,24.984
c-20.547,3.5-30.703,17.703-25.891,53.125c2.406,17.688,49.094,25.297,95.344,24.641c46.25,0.656,93.641-6.953,96.047-24.641
C356.406,323.891,346.469,309.688,325.906,306.188z" />
</svg>

5
  • 2
    essa técnica não é responsiva, é "fluida" ou "líquida".. 25/07/2015 às 3:50
  • na pergunta diz "quero trabalhar com ela de forma responsiva"... entendeu? 26/07/2015 às 15:11
  • Isso não quer dizer "responsivo".. Apenas entenda que responsivo é diferente de líquido/fluido... 26/07/2015 às 19:52
  • obrigado @natan resolveu meu problema :D 26/07/2015 às 20:38
  • Pessoal, isso resolve meu problema, não foi exatamente uma técnica responsiva mas resolveu minha questão, muito obrigado a todos vocês pela ajuda. 26/07/2015 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .