Sistemas de Sprites SVG: Gestión Eficiente de Iconos
Crea sistemas de sprites SVG eficientes para aplicaciones a gran escala. Aprende generación de sprites, patrones de uso y técnicas de optimización de rendimiento.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- Los sprites SVG combinan docenas de iconos en una sola solicitud HTTP, reduciendo drásticamente la sobrecarga de red
-
El patrón
<symbol>+<use>permite definir iconos una vez y referenciarlos en cualquier parte de la página - Los sprites externos son mejores para apps grandes (cacheables), mientras que los sprites inline sirven para sitios más pequeños (latencia cero)
- Estiliza sprites con propiedades personalizadas CSS para dimensionamiento consistente, temas de color y estados hover
-
Siempre agrega
aria-hidden="true"a los iconos decorativos yrole="img"con<title>a los significativos
¿Por Qué Sprites SVG?
Archivos SVG individuales significan solicitudes HTTP separadas. Los sistemas de sprites combinan iconos en archivos únicos, mejorando el rendimiento y simplificando la gestión.
Beneficios del Sistema de Sprites
Rendimiento
Iconos Individuales:
50 iconos x 1 solicitud = 50 solicitudes
Sprite SVG:
50 iconos = 1 solicitudGestión
Ventajas:
- Fuente única de verdad
- Actualizaciones fáciles
- Estilo consistente
- Compatible con control de versiones
Tipos de Sprites
Sprite Externo
Archivo separado referenciado:
<!-- sprites.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27..."/>
</symbol>
</svg>
<!-- Uso -->
<svg class="icon">
<use href="/sprites.svg#icon-home"/>
</svg>Sprite Inline
Incrustado en HTML:
<body>
<!-- Contenedor de sprite oculto -->
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
<!-- más símbolos -->
</svg>
<!-- Uso en cualquier parte de la página -->
<svg class="icon">
<use href="#icon-home"/>
</svg>
</body>Sprite CSS de Fondo
Enfoque Data URI:
.icon-home {
background-image: url("data:image/svg+xml,...");
}Pro Tip: Prefiere sprites inline para iconos por encima del pliegue que deben renderizarse instantáneamente, y sprites externos para grandes conjuntos de iconos que se benefician del caché del navegador entre navegaciones de página.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealCreación de Sprites
Creación Manual
Estructura:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Estilos compartidos -->
<style>
.icon-stroke { stroke-width: 2; fill: none; }
</style>
</defs>
<symbol id="icon-1" viewBox="0 0 24 24">
<!-- rutas de iconos -->
</symbol>
<symbol id="icon-2" viewBox="0 0 24 24">
<!-- rutas de iconos -->
</symbol>
</svg>Generación Automatizada
Usando svg-sprite:
// gulpfile.js
const svgSprite = require('gulp-svg-sprite');
gulp.task('sprite', () => {
return gulp.src('icons/*.svg')
.pipe(svgSprite({
mode: {
symbol: {
dest: '.',
sprite: 'sprites.svg'
}
}
}))
.pipe(gulp.dest('dist'));
});Integración Webpack
// webpack.config.js
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
module.exports = {
module: {
rules: [{
test: /\.svg$/,
use: [{
loader: 'svg-sprite-loader',
options: { extract: true }
}]
}]
},
plugins: [new SpriteLoaderPlugin()]
};Patrones de Uso
Uso Básico
<svg class="icon icon-home" aria-hidden="true">
<use href="#icon-home"/>
</svg>Componente React
function Icon({ name, size = 24, className }) {
return (
<svg
className={`icon ${className}`}
width={size}
height={size}
aria-hidden="true"
>
<use href={`#icon-${name}`}/>
</svg>
);
}
// Uso
<Icon name="home" size={20} className="nav-icon"/>Componente Vue
<template>
<svg :class="['icon', className]" :width="size" :height="size">
<use :href="`#icon-${name}`"/>
</svg>
</template>
<script>
export default {
props: {
name: String,
size: { type: Number, default: 24 },
className: String
}
}
</script>"Un sistema de sprites SVG bien construido es la columna vertebral de cualquier sistema de diseño escalable. Es el único asset que toca cada página y cada componente.
Estilizar Sprites
Estilo CSS
.icon {
width: 24px;
height: 24px;
fill: currentColor;
}
.icon-primary {
fill: var(--color-primary);
}
.icon-lg {
width: 32px;
height: 32px;
}Propiedades Personalizadas CSS
:root {
--icon-size: 24px;
--icon-color: currentColor;
}
.icon {
width: var(--icon-size);
height: var(--icon-size);
fill: var(--icon-color);
}
.icon-lg { --icon-size: 32px; }
.icon-danger { --icon-color: #dc3545; }Iconos Stroke
.icon-stroke {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeAccesibilidad
Iconos Decorativos
<button>
<svg class="icon" aria-hidden="true">
<use href="#icon-settings"/>
</svg>
Configuración
</button>Iconos Significativos
<a href="/home">
<svg class="icon" role="img" aria-label="Inicio">
<title>Inicio</title>
<use href="#icon-home"/>
</svg>
</a>Optimización de Rendimiento
Estrategia de Caché
<!-- Pre-cargar sprite externo -->
<link rel="preload" href="/sprites.svg" as="image" type="image/svg+xml">División de Código
// Cargar sprite bajo demanda
async function loadSprite() {
const response = await fetch('/sprites.svg');
const svg = await response.text();
document.body.insertAdjacentHTML('afterbegin', svg);
}Subconjuntos de Sprites
Crea sprites más pequeños por sección:
/sprites
/navigation-icons.svg
/social-icons.svg
/editor-icons.svgPara aplicaciones con más de 100 iconos, divide los sprites por sección de página o área funcional. Esto evita cargar iconos de editor en páginas que solo necesitan iconos de navegación, manteniendo el payload inicial pequeño.
Gestionar Grandes Conjuntos de Iconos
Organización
/icons
/navigation
home.svg
menu.svg
/actions
edit.svg
delete.svg
/social
twitter.svg
facebook.svgDocumentación
Genera una referencia de iconos:
<div class="icon-grid">
<div class="icon-item">
<svg><use href="#icon-home"/></svg>
<span>home</span>
</div>
<!-- ... -->
</div>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealVectoSolve para Conjuntos de Iconos
Conversión de Iconos
Usa VectoSolve para crear iconos:
- Convierte imágenes fuente
- Limpia y optimiza
- Combina en sprite
- Despliega
Salida Consistente
VectoSolve proporciona:
- Rutas limpias
- viewBox consistente
- Salida optimizada
- Listo para sprites
Conclusión
Los sistemas de sprites SVG mejoran dramáticamente la gestión de iconos y el rendimiento. Elige el enfoque correcto para tu proyecto — inline para conjuntos pequeños, externo para aplicaciones grandes. Usa VectoSolve para crear iconos limpios y consistentes listos para integración en sprites.