Ejemplos SVG | Elysia Tools

Ejemplos

Entradas de esta colección

ImagensvgSimple

Formas SVG Básicas

Demostración de formas SVG básicas con rectángulo, círculo, elipse, línea, polilínea y elementos poligonales

Dificultad

1/10

Tiempo estimado

5 min

Etiquetas

beginner, basic-shapes, geometric

Formas SVG Básicas

SVG · 1.5 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","circle","ellipse","line","polyline","polygon","text"]
features: ["Basic shapes","Stroke and fill","Text labels"]
complexity: beginner
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgSimple

Propiedades de Trazo y Relleno

Demostración de propiedades de trazo y relleno SVG con varios estilos de línea y patrones

Dificultad

2/10

Tiempo estimado

10 min

Etiquetas

beginner, styling, appearance

Propiedades de Trazo y Relleno

SVG · 1.9 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","circle","path","line"]
features: ["Stroke styles","Fill patterns","Dash arrays","Line caps"]
complexity: beginner
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: false

ImagensvgIntermedio

Transformaciones SVG

Ejemplos de transformación SVG incluyendo traducción, rotación, escala y operaciones de sesgado

Dificultad

4/10

Tiempo estimado

15 min

Etiquetas

intermediate, transformation, positioning

Transformaciones SVG

SVG · 1.2 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","circle","g","transform"]
features: ["Translation","Rotation","Scaling","Skewing","Matrix transforms"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgIntermedio

Gradientes SVG

Demostraciones de degradados lineales y radiales con múltiples paradas de color y efectos

Dificultad

3/10

Tiempo estimado

12 min

Etiquetas

intermediate, colors, visual-effects

Gradientes SVG

SVG · 1.1 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","circle","linearGradient","radialGradient","stop"]
features: ["Linear gradients","Radial gradients","Color stops","Gradient fills"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: true
hasFilters: false
hasText: true

ImagensvgIntermedio

Patrones SVG

Definiciones y aplicaciones de patrones SVG para crear fondos repetitivos y texturas

Dificultad

5/10

Tiempo estimado

18 min

Etiquetas

intermediate, design, repeating

Patrones SVG

SVG · 1.0 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","pattern","circle","path","polygon"]
features: ["Pattern fills","Repeating patterns","Custom textures","Pattern transforms"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgIntermedio

Marcadores SVG

Elementos de marcador SVG para crear puntas de flecha personalizadas y puntos terminales en caminos y líneas

Dificultad

4/10

Tiempo estimado

15 min

Etiquetas

intermediate, decoration, paths

Marcadores SVG

SVG · 1.1 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["path","line","polyline","marker","defs"]
features: ["Custom markers","Arrowheads","Path endpoints","Marker positioning"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgIntermedio

Texto en Camino

Texto posicionado a lo largo de caminos SVG con varios efectos de texto y opciones de estilo

Dificultad

5/10

Tiempo estimado

20 min

Etiquetas

intermediate, text, typography

Texto en Camino

SVG · 1012 B · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["text","textPath","path","defs"]
features: ["Text on path","Path text alignment","Text spacing","Text effects"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgComplejo

Recorte y Enmascaramiento

Demostraciones de recorte y enmascaramiento para crear formas complejas y efectos

Dificultad

7/10

Tiempo estimado

25 min

Etiquetas

advanced, masking, shapes

Recorte y Enmascaramiento

SVG · 1.4 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","circle","clipPath","mask","image","g"]
features: ["Clipping paths","Masks","Alpha masks","Complex shapes"]
complexity: advanced
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgComplejo

Filtros SVG

Efectos de filtro SVG incluyendo desenfoque, sombra, manipulación de color y efectos visuales

Dificultad

8/10

Tiempo estimado

30 min

Etiquetas

advanced, visual-effects, filters

Filtros SVG

SVG · 1.6 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["rect","circle","filter","feGaussianBlur","feDropShadow","feColorMatrix","image"]
features: ["Gaussian blur","Drop shadows","Color manipulation","Filter chaining"]
complexity: advanced
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: true
hasText: true

ImagensvgComplejo

Animación SVG

Animaciones SMIL demostrando cambios de color, transformaciones y efectos de movimiento

Dificultad

9/10

Tiempo estimado

35 min

Etiquetas

advanced, animation, interactive

Animación SVG

SVG · 1.0 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["circle","rect","animate","animateTransform","text"]
features: ["SMIL animation","Color animation","Transform animation","Motion paths"]
complexity: advanced
viewBox: 0 0 360 240
hasAnimation: true
hasGradients: false
hasFilters: false
hasText: true

ImagensvgIntermedio

Diseño SVG Responsivo

Técnicas de diseño SVG responsivo con layouts adaptables y comportamientos de escalado

Dificultad

6/10

Tiempo estimado

20 min

Etiquetas

intermediate, responsive, layout

Diseño SVG Responsivo

SVG · 834 B · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["svg","g","rect","circle","text","symbol","use"]
features: ["Responsive design","Adaptive layouts","Scaling behavior","ViewBox management"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgIntermedio

Símbolos SVG y Reuso

Símbolos SVG y elementos reutilizables con el elemento use para gráficos eficientes

Dificultad

5/10

Tiempo estimado

18 min

Etiquetas

intermediate, architecture, efficiency

Símbolos SVG y Reuso

SVG · 834 B · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["symbol","use","defs","g","rect","circle","path"]
features: ["Reusable symbols","Use element","Symbol instances","Graphic libraries"]
complexity: intermediate
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

ImagensvgComplejo

Integración ForeignObject

Integración de contenido HTML dentro de SVG usando foreignObject para contenido mixto

Dificultad

10/10

Tiempo estimado

40 min

Etiquetas

advanced, integration, html

Integración ForeignObject

SVG · 1.1 KB · 360×240

Descargar imagen Abrir en nueva pestaña

elements: ["foreignObject","div","p","style","rect","text"]
features: ["HTML integration","ForeignObject","Mixed content","Styling integration"]
complexity: advanced
viewBox: 0 0 360 240
hasAnimation: false
hasGradients: false
hasFilters: false
hasText: true

Ejemplos SVG | Elysia Tools