Conceitos Gráficos Básicos

Raster vs Vetor

Entenda a diferença fundamental entre grades de pixels e caminhos matemáticos através desta demonstração interativa.

Nível de Zoom: 1.0x
Arraste para ver detalhes
Raster
Essência: Grade de Pixels
Vetor
Essência: Caminhos Matemáticos

Tecnologia Raster

  • Princípio:

    Uma grade de quadrados coloridos chamados "pixels". Cada pixel contém informações de cor (RGB). A qualidade depende diretamente da Resolução (DPI/PPI).

  • Cor:

    Excelente em gradientes complexos, sombras e detalhes. A única escolha para fotos e pinturas realistas.

  • Formatos:
    JPG PNG GIF TIFF WEBP

Tecnologia Vetorial

  • Princípio:

    Baseado em fórmulas matemáticas (pontos, linhas, curvas). Ex: um círculo é definido por centro e raio `r`, não pixels. Assim, é infinitamente escalável sem perda.

  • Arquivo:

    O tamanho do arquivo geralmente é muito pequeno (armazena apenas instruções) e independente das dimensões. Não serve para fotorrealismo.

  • Formatos:
    SVG AI EPS PDF
DimensãoRasterVetor
Resolução
Dependente
Independente
Tamanho
Grande (alta res)
Mínimo (formas simples)
Conversão
Difícil vetorizar
Fácil rasterizar
Uso
Fotos, Pinturas
Logos, Ícones, Texto
Dica: O design web moderno usa SVG para ícones (nitidez Retina) e WebP/JPG para fundos fotográficos.