A otimização de código é sempre uma necessidade eterna dos programadores, e o uso razoável de imagens SVG para substituir algumas imagens em PNG/JPG e outros formatos é uma parte importante da otimização de front-end. Por se tratar de otimização, vamos primeiro dar uma olhada no. Imagens SVG. Quais são as vantagens:
SVG pode ser lido e modificado por muitas ferramentas (como o Bloco de Notas)
Alguns pequenos exemplos de imagens SVG:
Vamos dar uma olhada no código do terceiro ícone de compartilhamento:
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g acidente vascular cerebral=#AAB0BA fill=none fill-rule=evenodd> <caminho d=M10 .524 3.413v8.235 acidente vascular cerebral-linejoin=round/> <caminho d=M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
Os alunos que não entendem SVG devem ter pontos de interrogação em seus rostos agora, assim como na primeira vez que os conheci. Não se preocupe, vamos começar do básico.
O que é SVG?SVG é um formato de imagem baseado na sintaxe XML e seu nome completo é Scalable Vector Graphics. Outros formatos de imagem são baseados no processamento de pixels, enquanto SVG é uma descrição da forma de uma imagem, portanto é essencialmente um arquivo de texto de tamanho pequeno e não será distorcido por mais que seja ampliado. Além disso, o SVG é um padrão do World Wide Web Consortium e o SVG está integrado aos padrões W3C, como DOM e XSL.
Como usar?No HTML5, você pode incorporar elementos SVG diretamente nas páginas HTML, como o pequeno coração vermelho acima:
<body> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <rect id=ay=54 largura=60 altura=25 rx=1/> <mask id=bx=0 y=0 largura=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g transform=translate(-9 -56) fill=none fill-rule=evenodd> <use acidente vascular cerebral= #EDEEEF máscara=url(#b) largura do traço=2 xlink:href=#a/> <caminho d=M19.05 62,797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1,457-3,629 1,725z fill=red/> </g> </svg></body>
O código SVG também pode ser escrito em um arquivo que termina com .svg e depois inserido na página da web usando tags como <img> , <object> , <embed> e <iframe> .
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
CSS também pode usar SVG
.logo { background: url(logo.svg);}Os arquivos SVG também podem ser convertidos para a codificação BASE64 e depois gravados em páginas da web como URIs de dados.
<img src=dados:image/svg+xml;base64,[dados]>Sintaxe SVG
1. Marcação <svg>
O código SVG é colocado na tag de nível superior <svg> . Abaixo está um exemplo.
<svg largura=100% altura=100%> <circle id=meucírculo cx=50 cy=50 r=50 /></svg>
Os atributos de largura e altura de <svg> especificam a largura e a altura que a imagem SVG ocupa no elemento HTML. Além das unidades relativas, também podem ser utilizadas unidades absolutas (unidade: pixel). Se esses dois atributos não forem especificados, o tamanho padrão da imagem SVG será 300 pixels (largura) x 150 pixels (altura).
Se você deseja exibir apenas parte da imagem SVG, especifique o atributo viewBox.
<svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
O valor do atributo <viewBox> possui quatro números, que são a abcissa e a ordenada do canto superior esquerdo, a largura e a altura da viewport. No código acima, a imagem SVG tem 100 pixels de largura x 100 pixels de altura e o atributo viewBox especifica que a janela de visualização começa no ponto (50, 50). Então, o que você realmente vê é o quarto de círculo no canto inferior direito.
Observe que a viewport deve caber no espaço em que está. No código acima, o tamanho da janela de visualização é 50 x 50. Como o tamanho da imagem SVG é 100 x 100, a janela de visualização será ampliada para caber no tamanho da imagem SVG, ou seja, será ampliada quatro vezes .
Se você não especificar o atributo width e o atributo height e especificar apenas o atributo viewBox, será equivalente a fornecer apenas a proporção da imagem SVG. Neste caso, o tamanho padrão da imagem SVG será igual ao tamanho do elemento HTML que ela contém.
2. Etiqueta <circle>
A tag <circle> representa um círculo.
<svg largura=300 altura=180> <círculo cx=30 cy=50 r=25 /> <círculo cx=90 cy=50 r=25 classe=vermelho /> <círculo cx=150 cy=50 r=25 classe =chique /></svg>
O código acima define três círculos. Os atributos cx, cy e r da tag <circle> são abscissa, ordenada e raio, respectivamente, e a unidade são pixels. As coordenadas são relativas à origem do canto superior esquerdo da tela <svg> .
O atributo class é usado para especificar a classe CSS correspondente.
.red {preenchimento: vermelho;}.fancy {preenchimento: nenhum traço: preto; largura do traço: 3pt;}As propriedades CSS do SVG são diferentes daquelas dos elementos da web.
preenchimento: cor de preenchimento
traço: cor do traço
largura do traço: largura da borda
3. Marcação <line>
A tag <line> é usada para desenhar linhas retas.
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style=stroke:rgb(0,0,0);stroke-width:5 /></svg>
No código acima, o atributo x1 e o atributo y1 da tag <line> representam as coordenadas de abcissas e ordenadas do ponto inicial do segmento de linha; segmento de linha; o atributo style representa o estilo do segmento de linha.
4. Tag <polyline>
A tag <polyline> é usada para desenhar uma polilinha.
<svg width=300 height=180> <polyline points=3,3 30,28 3,53 fill=none stroke=black /></svg>
O atributo points de <polyline> especifica as coordenadas de cada ponto final. As abcissas e as ordenadas são separadas por vírgulas e os pontos são separados por espaços.
5. Marcação <rect>
A tag <rect> é usada para desenhar retângulos.
<svg largura=300 altura=180> <rect x=0 y=0 altura=100 largura=200 estilo=traço: #70d5dd preenchimento: #dd524b /></svg>
Os atributos xey de <rect> especificam as coordenadas de abscissa e ordenadas do ponto final do canto superior esquerdo do retângulo; os atributos de largura e altura especificam a largura e a altura (pixels unitários) do retângulo;
6. Marca <ellipse>
A tag <ellipse> é usada para desenhar elipses.
<largura svg=300 altura=180> <elipse cx=60 cy=60 ry=40 rx=20 traço=preto largura-traço=5 fill=prata/></svg>
O atributo cx e o atributo cy de <ellipse> especificam as coordenadas de abcissas e ordenadas do centro da elipse (pixel unitário); o atributo rx e o atributo ry especificam o raio dos eixos transversal e longitudinal da elipse (pixel unitário).
7. Tag <polygon>
A tag <polygon> é usada para desenhar polígonos.
<largura svg=300 altura=180> <preenchimento de polígono=traço verde=largura laranja=1 pontos=0,0 100,0 100,100 0,100 0,0/></svg>
O atributo points de <polygon> especifica as coordenadas de cada ponto final. As abcissas e as ordenadas são separadas por vírgulas e os pontos são separados por espaços.
8. Marcação <path>
A tag <path> é usada para especificar o caminho.
<svg largura=300 altura=180><caminho d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></caminho></svg >
O atributo d de <path> representa a ordem de desenho. Seu valor é uma longa string. Cada letra representa uma ação de desenho, seguida por coordenadas.
M: mover para (moveto)
L: Desenhe uma linha reta para (lineto)
Z: caminho fechado
9. Marcação <text>
A tag <text> é usada para desenhar texto.
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
Os atributos xey de <text> representam a abcissa e a ordenada do ponto inicial da linha de base do bloco de texto. O estilo do texto pode ser especificado usando os atributos de classe ou estilo.
10. Etiqueta <use>
A tag <use> é usada para copiar uma forma.
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=white stroke=blue /></svg>
O atributo href de <use> especifica o nó a ser copiado, e o atributo x e o atributo y são as coordenadas do canto superior esquerdo de <use> . Além disso, você também pode especificar coordenadas de largura e altura.
11. Etiqueta <g>
A tag <g> é usada para agrupar várias formas em um grupo para fácil reutilização.
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>círculo</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white stroke=blue /></svg>
12. Marcação <defs>
A tag <defs> é usada para formas personalizadas. O código dentro dela não será exibido e é apenas para referência.
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>círculo</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white stroke=blue /></svg>
13. Marca <pattern>
A tag <pattern> é usada para personalizar uma forma que pode ser referenciada para colocar uma área lado a lado.
<svg width=500 height=500> <defs> <pattern id=dots x=0 y=0 width=100 height=100 patternUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <rect x=0 y=0 largura=100% altura=100% fill=url(#dots) /></svg>
No código acima, a tag <pattern> define um círculo como um padrão de pontos. patternUnits=userSpaceOnUse significa que a largura e o comprimento de <pattern> são valores reais de pixel. Em seguida, atribua este modo para preencher o retângulo inferior.
14. Marca <image>
A tag <image> é usada para inserir arquivos de imagem.
<svg viewBox=0 0 100 100 largura=100 altura=100> <image xlink:href=path/to/image.jpg width=50% height=50%/></svg>
No código acima, xlink:href de <image> indica a origem da imagem.
15. Tag <animate>
A tag <animate> é usada para produzir efeitos de animação.
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animate attributeName=x from=0 to=500 dur=2s repeatCount=indefinite /> </rect </svg>
No código acima, o retângulo continuará a se mover e a produzir efeitos de animação.
Os atributos de <animate> têm os seguintes significados.
attributeName: O nome do atributo onde ocorre o efeito de animação.
from: O valor inicial de uma única animação.
to: O valor final de uma única animação.
dur: a duração de uma única animação.
RepeatCount: modo de loop de animação.
As animações podem ser definidas em múltiplas propriedades.
<animar atributoNome=x de=0 a=500 dur=2s repetirCount=indefinido /><animar atributoNome=largura a=500 dur=2s repetirCount=indefinido />
16. Marcação <animateTransform>
A tag <animate> não tem efeito no atributo de transformação CSS. Se a transformação for necessária, a tag <animateTransform> deverá ser usada.
<svg largura=500px altura=500px> <rect x=250 y=250 largura=50 altura=50 preenchimento=#4bc0c8> <animateTransform atributoName=transform type=rotate start=0s dur=10s from=0 200 200 to=360 400 400 repetirCount=indefinido /> </rect></svg>
No código acima, o efeito de <animateTransform> é a rotação. Neste momento, os valores dos atributos from e to têm três números. O primeiro número é o valor do ângulo e o segundo e o terceiro valores são as coordenadas de. o centro de rotação. de=0 200 200 significa que no início o ângulo é 0 e a rotação começa em torno de (200, 200 a=360 400 400 significa que no final o ângulo é 360 e a rotação começa em torno de (400); , 400).
1. Operações DOM
Se o código SVG for escrito diretamente na página HTML, ele se tornará parte do DOM da página e poderá ser manipulado diretamente usando o DOM.
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 preserveAspectRatio=xMidYMid meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
Depois que o código acima for inserido na página da web, você poderá usar CSS para personalizar o estilo.
círculo { largura do traço: 5; traço: #f00; preenchimento: #ff0;}círculo:hover { traço: #090;O SVG pode então ser manipulado com código JavaScript.
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('círculo clicado - ampliando'); mycircle.setAttribute('r', 60);}, falso);O código acima especifica que se o gráfico for clicado, o atributo r do elemento círculo será reescrito.
2. Obtenha SVG DOM
Use tags <object> , <iframe> , <embed> para inserir arquivos SVG para obter SVG DOM.
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument var svgEmbed = document.getElementById('embed').getSVGDocument();Observe que se você usar a tag <img> para inserir um arquivo SVG, não poderá obter o DOM SVG.
3. Leia o código-fonte SVG
Como o arquivo SVG é um trecho de texto XML, o código-fonte SVG pode ser lido lendo o código XML.
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve width=500 height=440 > <!-- código svg --> </svg></div>
Use o método serializeToString() da instância XMLSerializer para obter o código do elemento SVG.
var svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));4. Converta imagem SVG em imagem Canvas
Primeiro, você precisa criar um novo objeto Image e atribuir a imagem SVG ao atributo src do objeto Image.
var img = new Image();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL self; var url = DOMURL.createObjectURL(svg);img.src = url; Então, quando a imagem for carregada, desenhe-a no elemento <canvas> .
img.onload = function () { var canvas = document.getElementById('canvas'); resumoSVG pode fazer muito mais do que isso. Explicaremos detalhadamente os efeitos de animação e de texto feitos usando SVG, mas vamos parar por aqui hoje.
console.log('右下角点好看呦')O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem o Script Home.