Exemplos SVG | Elysia Tools

Exemplos

Entradas desta coleção

ImagemsvgSimples

Formas SVG Básicas

Demonstração de formas SVG básicas com retângulo, círculo, elipse, linha, polilinha e elementos poligonais

Dificuldade

1/10

Tempo estimado

5 min

Etiquetas

beginner, basic-shapes, geometric

Formas SVG Básicas

SVG · 1.5 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgSimples

Propriedades de Traçado e Preenchimento

Demonstração de propriedades de traçado e preenchimento SVG com vários estilos de linha e padrões

Dificuldade

2/10

Tempo estimado

10 min

Etiquetas

beginner, styling, appearance

Propriedades de Traçado e Preenchimento

SVG · 1.9 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Transformações SVG

Exemplos de transformação SVG incluindo translação, rotação, escala e operações de inclinação

Dificuldade

4/10

Tempo estimado

15 min

Etiquetas

intermediate, transformation, positioning

Transformações SVG

SVG · 1.2 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Gradientes SVG

Demonstrações de gradientes lineares e radiais com múltiplas paradas de cor e efeitos

Dificuldade

3/10

Tempo estimado

12 min

Etiquetas

intermediate, colors, visual-effects

Gradientes SVG

SVG · 1.1 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Padrões SVG

Definições e aplicações de padrões SVG para criar fundos repetitivos e texturas

Dificuldade

5/10

Tempo estimado

18 min

Etiquetas

intermediate, design, repeating

Padrões SVG

SVG · 1.0 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Marcadores SVG

Elementos de marcador SVG para criar pontas de seta personalizadas e pontos finais em caminhos e linhas

Dificuldade

4/10

Tempo estimado

15 min

Etiquetas

intermediate, decoration, paths

Marcadores SVG

SVG · 1.1 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Texto no Caminho

Texto posicionado ao longo de caminhos SVG com vários efeitos de texto e opções de estilo

Dificuldade

5/10

Tempo estimado

20 min

Etiquetas

intermediate, text, typography

Texto no Caminho

SVG · 1012 B · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgComplexo

Recorte e Mascaramento

Demonstrações de recorte e mascaramento para criar formas complexas e efeitos

Dificuldade

7/10

Tempo estimado

25 min

Etiquetas

advanced, masking, shapes

Recorte e Mascaramento

SVG · 1.4 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgComplexo

Filtros SVG

Efeitos de filtro SVG incluindo desfoque, sombra, manipulação de cor e efeitos visuais

Dificuldade

8/10

Tempo estimado

30 min

Etiquetas

advanced, visual-effects, filters

Filtros SVG

SVG · 1.6 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgComplexo

Animação SVG

Animações SMIL demonstrando mudanças de cor, transformações e efeitos de movimento

Dificuldade

9/10

Tempo estimado

35 min

Etiquetas

advanced, animation, interactive

Animação SVG

SVG · 1.0 KB · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Design SVG Responsivo

Técnicas de design SVG responsivo com layouts adaptáveis e comportamentos de escalonamento

Dificuldade

6/10

Tempo estimado

20 min

Etiquetas

intermediate, responsive, layout

Design SVG Responsivo

SVG · 834 B · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgIntermediário

Símbolos SVG e Reuso

Símbolos SVG e elementos reutilizáveis com o elemento use para gráficos eficientes

Dificuldade

5/10

Tempo estimado

18 min

Etiquetas

intermediate, architecture, efficiency

Símbolos SVG e Reuso

SVG · 834 B · 360×240

Baixar imagem Abrir em nova aba

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

ImagemsvgComplexo

Integração ForeignObject

Integração de conteúdo HTML dentro de SVG usando foreignObject para conteúdo misto

Dificuldade

10/10

Tempo estimado

40 min

Etiquetas

advanced, integration, html

Integração ForeignObject

SVG · 1.1 KB · 360×240

Baixar imagem Abrir em nova aba

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

Exemplos SVG | Elysia Tools