Multimídia - Vetorial vs Matricial

Vetorial vs Matricial

PNG · JPG · WebP · SVG
01 Visualização interativa
formatoVetorial.svg
Vector Arch Linux Logo
30% zoom
ZOOM30%

Imagens vetoriais são definidas por equações matemáticas — curvas de Bézier, arcos e primitivas geométricas armazenadas como instruções, não como pixels. O arquivo descreve como desenhar a forma, e o renderizador resolve isso em tempo real para qualquer resolução de saída.

Em SVG, cada elemento é um nó DOM acessível via getAttribute e setAttribute. Em PDF/EPS, as instruções seguem um modelo de stream de operadores (moveto, curveto, fill). Isso torna o formato intrinsecamente escalável: ampliar 4000× não degrada nitidez porque não há amostragem discreta envolvida.

REPRESENTAÇÃOEquações paramétricas + primitivas geométricas
ESCALONAMENTOLossless — resolução independente
TAMANHOProporcional à complexidade do caminho, não à área
IDEAL PARALogotipos, tipografia, ícones, UI, impressão
LIMITAÇÃOFotografia e gradientes complexos são custosos
formatoMatricial.png / .jpg / .webp
Raster Arch Linux Logo
30% zoom
ZOOM30%

Imagens matriciais (bitmap) armazenam informação como uma grade bidimensional de pixels — cada célula contém valores numéricos de canal de cor (ex: R, G, B, A em 8 bits por canal = 32 bits por pixel). A qualidade da imagem é fixada no momento da exportação: a resolução em pixels por polegada (DPI/PPI) determina o nível de detalhe disponível.

Ao ampliar além da resolução nativa, algoritmos de interpolação como nearest-neighbor, bilinear ou bicubic estimam valores para os novos pixels — gerando o artefato de pixelação ou borrão característico. Formatos com compressão com perda como JPEG aplicam a Transformada Discreta de Cossenos (DCT) por blocos de 8×8, descartando informação de alta frequência irreversível.

REPRESENTAÇÃOGrade de pixels — valores discretos por canal
ESCALONAMENTOLossy — interpolação ao ampliar
TAMANHOProporcional à área (largura × altura × bit depth)
IDEAL PARAFotografia, capturas de tela, texturas, render 3D
LIMITAÇÃORedimensionamento destrutivo; tamanho de arquivo alto
02 Tabela comparativa
Vetorial
EscalabilidadePerfeita
Suporte fotografiaInadequado
EditabilidadeAlta (por nó)
RenderizaçãoCPU/GPU em RT
CompressãoSVGZ (gzip)
Interatividade webNativa via DOM
CompatibilidadeLimitada
Matricial
EscalabilidadeDependente de DPI
Suporte fotografiaExcelente
EditabilidadePor pixel/camada
RenderizaçãoDireta (blitting)
CompressãoLossy/lossless
Interatividade webVia canvas/WebGL
CompatibilidadeUniversal