L'optimisation du code est toujours un besoin éternel des programmeurs, et l'utilisation raisonnable d'images SVG pour remplacer certaines images au format PNG/JPG et d'autres formats est une partie importante de l'optimisation frontale. Puisqu'il s'agit d'optimisation, jetons d'abord un coup d'œil à. Images SVG. Quels sont les avantages :
SVG peut être lu et modifié par de nombreux outils (tels que le Bloc-notes)
Quelques petits exemples d'images SVG :
Jetons un coup d'œil au code de la troisième icône de partage :
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g Stroke=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235 Stroke-linejoin=round/> <chemin 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>
Les étudiants qui ne comprennent pas SVG doivent maintenant avoir des points d’interrogation sur le visage, comme la première fois que je les ai rencontrés. Ne vous inquiétez pas, commençons par l’essentiel.
Qu’est-ce que SVG ?SVG est un format d'image basé sur la syntaxe XML et son nom complet est Scalable Vector Graphics. D'autres formats d'image sont basés sur le traitement des pixels, et SVG est une description de la forme d'une image, il s'agit donc essentiellement d'un fichier texte de petite taille et ne sera pas déformé quel que soit le nombre de fois qu'il est agrandi. De plus, SVG est un standard du World Wide Web Consortium et SVG est intégré aux standards du W3C tels que DOM et XSL.
Comment utiliser ?En HTML5, vous pouvez intégrer des éléments SVG directement dans des pages HTML, comme le petit cœur rouge ci-dessus :
<corps> <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 width=60 height=25 rx=1/> <mask id=bx=0 y=0 width=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g transform=translate(-9 -56) fill=none fill-rule=evenodd> <use Stroke= #EDEEEF masque=url(#b) Stroke-width=2 xlink:href=#a/> <chemin 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=rouge/> </g> </svg></body>
Le code SVG peut également être écrit dans un fichier se terminant par .svg, puis inséré dans la page Web à l'aide de balises telles que <img> , <object> , <embed> et <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 peut également utiliser SVG
.logo { arrière-plan : url (logo.svg);}Les fichiers SVG peuvent également être convertis en codage BASE64, puis écrits sur des pages Web en tant qu'URI de données.
<img src=data:image/svg+xml;base64,[données]>Syntaxe SVG
1. Balise <svg>
Le code SVG est placé dans la balise de niveau supérieur <svg> . Ci-dessous un exemple.
<svg width=100% height=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
Les attributs width et height de <svg> spécifient la largeur et la hauteur de l'image SVG dans l'élément HTML. En plus des unités relatives, des unités absolues (unité : pixel) peuvent également être utilisées. Si ces deux attributs ne sont pas précisés, la taille par défaut de l'image SVG est de 300 pixels (largeur) x 150 pixels (hauteur).
Si vous souhaitez afficher uniquement une partie de l'image SVG, spécifiez l'attribut viewBox.
<svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
La valeur de l'attribut <viewBox> comporte quatre nombres, qui sont l'abscisse et l'ordonnée du coin supérieur gauche, la largeur et la hauteur de la fenêtre. Dans le code ci-dessus, l'image SVG mesure 100 pixels de large x 100 pixels de haut et l'attribut viewBox spécifie que la fenêtre commence à partir du point (50, 50). Donc, ce que vous voyez réellement, c'est le quart de cercle dans le coin inférieur droit.
Notez que la fenêtre doit s'adapter à l'espace dans lequel elle se trouve. Dans le code ci-dessus, la taille de la fenêtre est de 50 x 50. Puisque la taille de l'image SVG est de 100 x 100, la fenêtre sera agrandie pour s'adapter à la taille de l'image SVG, c'est-à-dire qu'elle sera agrandie quatre fois. .
Si vous ne spécifiez pas l'attribut width et l'attribut height et spécifiez uniquement l'attribut viewBox, cela équivaut à donner uniquement le rapport hauteur/largeur de l'image SVG. Dans ce cas, la taille par défaut de l'image SVG sera égale à la taille de l'élément HTML qu'elle contient.
2. Balise <circle>
La balise <circle> représente un cercle.
<svg width=300 height=180> <circle cx=30 cy=50 r=25 /> <circle cx=90 cy=50 r=25 class=red /> <circle cx=150 cy=50 r=25 class =fantaisie //></svg>
Le code ci-dessus définit trois cercles. Les attributs cx, cy et r de la balise <circle> sont respectivement l'abscisse, l'ordonnée et le rayon, et l'unité est le pixel. Les coordonnées sont relatives à l'origine du coin supérieur gauche du canevas <svg> .
L'attribut class est utilisé pour spécifier la classe CSS correspondante.
.red { fill : rouge ;}.fancy { fill : aucun ; trait : noir ; largeur de trait : 3 pt ;}Les propriétés CSS de SVG sont différentes de celles des éléments Web.
remplir : couleur de remplissage
trait : couleur du trait
largeur du trait : largeur de la bordure
3. Balise <line>
La balise <line> est utilisée pour tracer des lignes droites.
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style=Stroke:rgb(0,0,0);Stroke-width:5 ></svg>
Dans le code ci-dessus, l'attribut x1 et l'attribut y1 de la balise <line> représentent les coordonnées en abscisse et en ordonnée du point de départ du segment de ligne ; l'attribut x2 et l'attribut y2 représentent les coordonnées en abscisse et en ordonnée du point final du segment de ligne ; segment de ligne ; l'attribut style représente le style du segment de ligne.
4. Balise <polyline>
La balise <polyline> est utilisée pour dessiner une polyligne.
<svg width=300 height=180> <polyline points=3,3 30,28 3,53 fill=none Stroke=black /></svg>
L'attribut points de <polyline> spécifie les coordonnées de chaque point final. L'abscisse et l'ordonnée sont séparées par des virgules et les points sont séparés par des espaces.
5. Balise <rect>
La balise <rect> est utilisée pour dessiner des rectangles.
<svg width=300 height=180> <rect x=0 y=0 height=100 width=200 style=stroke : #70d5dd ; fill : #dd524b /></svg>
Les attributs x et y de <rect> spécifient les coordonnées en abscisse et en ordonnée de l'extrémité du coin supérieur gauche du rectangle ; les attributs width et height spécifient la largeur et la hauteur (pixels unitaires) du rectangle.
6. Balise <ellipse>
La balise <ellipse> est utilisée pour dessiner des ellipses.
<svg width=300 height=180> <ellipse cx=60 cy=60 ry=40 rx=20 Stroke=black Stroke-width=5 fill=silver/></svg>
Les attributs cx et cy de <ellipse> spécifient les coordonnées en abscisse et en ordonnée du centre de l'ellipse (pixels unitaires) ; les attributs rx et ry spécifient les rayons des axes transversal et longitudinal de l'ellipse (pixels unitaires).
7. Balise <polygon>
La balise <polygon> est utilisée pour dessiner des polygones.
<svg width=300 height=180> <polygon fill=green Stroke=orange Stroke-width=1 points=0,0 100,0 100,100 0,100 0,0/></svg>
L'attribut points de <polygon> spécifie les coordonnées de chaque point final. L'abscisse et l'ordonnée sont séparées par des virgules et les points sont séparés par des espaces.
8. <path>
La balise <path> est utilisée pour spécifier le chemin.
<svg largeur=300 hauteur=180><chemin d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></chemin></svg >
L'attribut d de <path> représente l'ordre de dessin. Sa valeur est une longue chaîne. Chaque lettre représente une action de dessin, suivie de coordonnées.
M : déplacer vers (déplacer vers)
L : Tracez une ligne droite vers (lineto)
Z : chemin fermé
9. Balise <text>
La balise <text> est utilisée pour dessiner du texte.
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
Les attributs x et y de <text> représentent l'abscisse et l'ordonnée du point de départ de la ligne de base du bloc de texte. Le style du texte peut être spécifié à l'aide des attributs de classe ou de style.
10. Balise <use>
La balise <use> est utilisée pour copier une forme.
<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 ans =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=white Stroke=blue />></svg>
L'attribut href de <use> spécifie le nœud à copier, et les attributs x et y sont les coordonnées du coin supérieur gauche de <use> . De plus, vous pouvez également spécifier les coordonnées de largeur et de hauteur.
11. Balise <g>
La balise <g> est utilisée pour regrouper plusieurs formes dans un groupe pour une réutilisation facile.
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>circle</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 trait=bleu /></svg>
12. Balise <defs>
La balise <defs> est utilisée pour les formes personnalisées. Le code qu'elle contient ne sera pas affiché et est uniquement à titre de référence.
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>cercle</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. Balise <pattern>
La balise <pattern> est utilisée pour personnaliser une forme qui peut être référencée pour carreler une zone.
<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 largeur=100% hauteur=100% fill=url(#points) /></svg>
Dans le code ci-dessus, la balise <pattern> définit un cercle comme un motif de points. patternUnits=userSpaceOnUse signifie que la largeur et la longueur de <pattern> sont des valeurs réelles en pixels. Ensuite, attribuez ce mode pour remplir le rectangle inférieur.
14. Balise <image>
La balise <image> est utilisée pour insérer des fichiers image.
<svg viewBox=0 0 100 100 width=100 height=100> <image xlink:href=path/to/image.jpg width=50% height=50%/></svg>
Dans le code ci-dessus, xlink:href de <image> indique la source de l'image.
15. Balise <animate>
La balise <animate> est utilisée pour produire des effets d'animation.
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animateattributName=x from=0 to=500 dur=2s repeatCount=indefinite /> </rect ></svg>
Dans le code ci-dessus, le rectangle continuera à se déplacer et à produire des effets d'animation.
Les attributs de <animate> ont les significations suivantes.
attributName : nom de l'attribut dans lequel l'effet d'animation se produit.
from : La valeur initiale d’une seule animation.
to : la valeur finale d'une seule animation.
dur : la durée d'une seule animation.
RepeatCount : mode boucle d'animation.
Les animations peuvent être définies sur plusieurs propriétés.
<animate attribuerName=x de=0 à=500 dur=2s repeatCount=indefinite /><animate attribuerName=largeur à=500 dur=2s repeatCount=indefinite />
16. Balise <animateTransform>
La balise <animate> n'a aucun effet sur l'attribut de transformation CSS. Si une transformation est requise, la balise <animateTransform> doit être utilisée.
<svg width=500px height=500px> <rect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransformattributName=transform type=rotate start=0s dur=10s from=0 200 200 to=360 400 400 repeatCount=indéfini /> </rect></svg>
Dans le code ci-dessus, l'effet de <animateTransform> est la rotation. À ce stade, les valeurs d'attribut from et to ont trois nombres. Le premier nombre est la valeur de l'angle, et les deuxième et troisième valeurs sont les coordonnées de. le centre de rotation. from=0 200 200 signifie qu'au début, l'angle est 0, et la rotation commence autour de (200, 200) ; to=360 400 400 signifie qu'à la fin, l'angle est 360, et la rotation commence autour de (400). , 400).
1. Opérations DOM
Si le code SVG est écrit directement dans la page Web HTML, il devient partie intégrante du DOM de la page Web et peut être directement manipulé à l'aide du DOM.
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 préservationAspectRatio=xMidYMid meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
Une fois le code ci-dessus inséré dans la page Web, vous pouvez utiliser CSS pour personnaliser le style.
cercle { largeur de trait : 5 ; trait : #f00 ; remplissage : #ff0;}cercle : survol { trait : #090 ; remplissage : #f8f8f8 ;}Le SVG peut ensuite être manipulé avec du code JavaScript.
var mon cercle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('circle clicked - enlarging'); mycircle.setAttribute('r', 60);}, FAUX);Le code ci-dessus spécifie que si l'on clique sur le graphique, l'attribut r de l'élément cercle sera réécrit.
2. Obtenez SVG DOM
Utilisez les balises <object> , <iframe> , <embed> pour insérer des fichiers SVG afin d'obtenir le SVG DOM.
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();Notez que si vous utilisez la balise <img> pour insérer un fichier SVG, vous ne pouvez pas obtenir le DOM SVG.
3. Lire le code source SVG
Étant donné que le fichier SVG est un morceau de texte XML, le code source SVG peut être lu en lisant le code 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 hauteur=440 > <!-- code svg --> </svg></div>
Utilisez la méthode serializeToString() de l'instance XMLSerializer pour obtenir le code de l'élément SVG.
var svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));4. Convertir l'image SVG en image Canvas
Tout d’abord, vous devez créer un nouvel objet Image et attribuer l’image SVG à l’attribut src de l’objet 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; Ensuite, lorsque l'image est chargée, dessinez-la sur l'élément <canvas> .
img.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0);}; résuméSVG peut faire bien plus que cela. Nous expliquerons en détail les effets d'animation et les effets de texte réalisés à l'aide de SVG plus tard, mais arrêtons-nous ici aujourd'hui.
console.log('右下角点好看呦')Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra Script Home.