What is included in Exemplos SVG?

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

Elysia Tools

Navegação

Media

Exemplos SVG

Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ferramentas

Ferramentas frequentemente usadas com este exemplo

Relacionado

Exemplos SVG

Entradas desta coleção

Formas SVG Básicas

Propriedades de Traçado e Preenchimento

Transformações SVG

Gradientes SVG

Padrões SVG

Marcadores SVG

Texto no Caminho

Recorte e Mascaramento

Filtros SVG

Animação SVG

Design SVG Responsivo

Símbolos SVG e Reuso

Integração ForeignObject

Ferramentas frequentemente usadas com este exemplo

Coleções de exemplos relacionadas

Contexto para entender esta coleção de exemplos

Visão geral

Quando usar

Como funciona

Casos de uso

Perguntas frequentes

Converter JPEG para SVG

Gerador de Favicon SVG

Minificador e analisador SVG

Conversor SVG para JPG

Conversor SVG para PNG

Conversor SVG para WebP

Converter PNG para SVG

Converter WebP para SVG

Exemplos de Códigos QR

Amostras SVG

Exemplos de Extrator de Links Markdown

Exemplos AVIF

Amostras PNG

Exemplos de Processamento de Imagem macOS Swift