Artigo Introdução de wulin.com (www.vevb.com): o nome completo do SVG é gráficos vetoriais escaláveis. Se você usou o Adobe Illustrator, acredito que você não está familiarizado com esse formato apropriado de fotos!
Antes de começarmos a usar o SVG, vamos dar uma olhada no SVG primeiro e explicar por que usamos o SVG.
O nome completo do SVG são os gráficos vetoriais escaláveis. Se você usou o Adobe Illustrator, acredito que você não está familiarizado com esse formato apropriado de fotos!
Por que usar SVG? Suporte do navegadorSe você precisar suportar essas versões do navegador, poderá usar o Modernizr da seguinte maneira:
if (! Modernizr.svg) {
$ (. GBLOGO IMG) .ATTR (SRC, Images/logo.png);
}
Ou use o seguinte código mais simples:
<img src = gblogo.svg onerror = this.onerror = null; this.src = gblogo.png>
Os arquivos SVG são usados como imagens geraisVocê pode usá -lo diretamente como uma imagem, como segue:
<img src = logo.svg href = class = logotipo>
csswang.com
</a>
Código CSS:
.logo {
mostrar:
Indent-text:
largura:
altura:
fundo:
tamanho de fundo:
}
Usando SVG em linhaVocê pode copiar o código SVG diretamente para o corpo e verá a imagem, como segue:
<Body>
<!-Copie o código SVG aqui e a imagem será exibida->
</body>
Controle SVG com CSSVocê pode usar o CSS para controlar o arquivo SVG. O código a seguir controlará a cor de fundo da imagem quando o mouse estiver suspenso:
<g class = logotipo transform = tradutor (0,000000.500.000000) (0,100000, -0.100000)
preenchimento =#00000 AVC = nenhum>
O código acima define uma classe de um logotipo, e podemos defini -lo no CSS da seguinte maneira:
.logo: hover {
preencher:
...
}
Observe que no SVG usamos preenchimento em vez de plano de fundo para definir a cor do fundo.
Você pode até usar filtros para controlar a ambiguidade, como segue:
.logo: hover {
preencher:
filtro:
}
Quando você usa o mouse para pairar a imagem, será o seguinte efeito.
Depuração online:
Resumo das ferramentas relacionadas ao SVGO SVG é um formato de imagem muito poderoso que pode ajudá -lo a processar as imagens com eficiência e possui um método de exibição gráfica mais flexível e poderosa que JPG ou PNG. Eu acredito que, se for aplicado a tempo, definitivamente se tornará o método de processamento de imagens mais popular!