What is included in Ejemplos SVG?

This page includes curated sample entries, related tools, and neighboring sample collections for Ejemplos SVG.

Elysia Tools

Navegación

Media

Ejemplos SVG

Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Herramientas

Herramientas que suelen usarse con este ejemplo

Relacionado

Ejemplos SVG

Entradas de esta colección

Formas SVG Básicas

Propiedades de Trazo y Relleno

Transformaciones SVG

Gradientes SVG

Patrones SVG

Marcadores SVG

Texto en Camino

Recorte y Enmascaramiento

Filtros SVG

Animación SVG

Diseño SVG Responsivo

Símbolos SVG y Reuso

Integración ForeignObject

Herramientas que suelen usarse con este ejemplo

Colecciones de ejemplos relacionadas

Contexto para entender esta colección de ejemplos

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Preguntas frecuentes

Convertir JPEG a SVG

Generador de Favicon SVG

Minificador y analizador SVG

Convertidor SVG a JPG

Convertidor SVG a PNG

Convertidor SVG a WebP

Convertir PNG a SVG

Convertir WebP a SVG

Ejemplos de Códigos QR

Muestras SVG

Ejemplos de Extractor de Enlaces Markdown

Ejemplos AVIF

Muestras PNG

Ejemplos de Procesamiento de Imágenes macOS Swift