La parte delantera del mundo está cambiando tan rápido, repentino, SVG tiene mucho que reemplazar como una pantalla de página Web del icono de fuente potencial de aplicación de un icono, en comparación icono de fuente, tiene las siguientes ventajas:
-
Zoom sin pérdida restaurador, visualización clara
-
buena semántica
-
CSS se puede utilizar para controlar el estilo de los iconos y animaciones
-
Reducir las peticiones HTTP
Si desea ver la específica SVG icono de la fuente y el contraste específica contraste, puede hacer referencia a la CSS truco "Inline SVG vs Icono de fuente" artículo.
iconos SVG utilizando el siguiente método:
1. img, objeto, etiqueta embed SVG referencia directa
La principal desventaja de este método es que cada icono se va a guardar como un solo archivo SVG, solicitando se usa solo, aumentado el número de peticiones HTTP.
<img src = "http://www.w3school.com.cn/svg/rect1.svg" ancho = "300" />
2.Inline SVG, SVG directamente escrito en HTML
SVG en línea Como parte del documento HTML, sin necesidad de solicitar por separado. necesidad temporal para modificar la forma de un icono también es más conveniente. Sin embargo, el uso de más complicado Inline SVG, SVG necesidad de insertar un trozo de código que no encaja en la página escrita a mano icono de la reutilización de ellos un problema.
<body> <svg anchura = "100%" altura = "100%" > <rect x = "20" y = "20" ancho = "250" altura = "250" estilo = "relleno: #fecdddd;" /> </ Svg> </ body>
3. SVG DEFS / Símbolos
Algunos sitios web (como el suministro de la producción del icono de fuente cuenta con icomoon ) ha proporcionado una salida SVG Sprites. Y la figura de mapa de bits del sprite como convencional, todos los iconos alineados en ciertos intervalos después de toda la composición de una imagen de gran tamaño, puede reducir efectivamente el número de solicitud web.
Más conveniente, podemos utilizar una referencia similar en su uso del icono.
<SVG clase = "icono" > <usa xlink: href = "/img/posts/svg-icons.svg#circle-check" > </ uso> </ svg> <SVG clase = "icono" > <usa XLink : href = "/img/posts/svg-icons.svg#circle-cross" > </ utilizar> </ svg>
Esta es la manera en que yo recomiendo, además de su propia producción, algunos proyectos también ofrecen descarga SVG Sprites, como Tabler-iconsThe .
Artículo de referencia: