> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Imagens SVG no p5.js: carregue, escale e guarde a origem

> Carregue um SVG no p5.js 2.3.4 com setup assíncrono, confira a abertura transparente em três tamanhos no Canvas e separe os caminhos editáveis da imagem exibida.

Source: https://perfectvector.com/pt-BR/blog/p5js-svg-artwork

Language: pt-BR
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

Para carregar uma imagem SVG no p5.js 2.3.4, use `await loadImage('emblem.svg')` dentro de `async function setup()` e desenhe a imagem retornada com `image()`. Sirva a página e o SVG por HTTP. Mantenha o arquivo SVG como seu original editável: essa rota de carregamento pinta uma `p5.Image` no Canvas e não fornece caminhos SVG editáveis ao sketch. A [referência atual de loadImage](https://p5js.org/reference/p5/loadImage/) documenta o padrão de carregamento baseado em Promise.

O carregamento bem-sucedido responde apenas à primeira pergunta. Confira se a abertura continua transparente, se a imagem está esticada e se as dimensões em pixels carregadas atendem ao maior tamanho de exibição. O exemplo abaixo usa um losango arredondado original com um furo e o desenha a 48, 120 e 240 pixels.

## Escolha entre exibição de imagem e geometria de origem

| O que você precisa                                  | O que manter ou conferir                                               |
| --------------------------------------------------- | ---------------------------------------------------------------------- |
| Pintar uma ilustração SVG existente em um sketch p5 | Carregue como imagem e examine o resultado no Canvas                   |
| Mudar os contornos de origem da ilustração          | Mantenha e edite o SVG original separadamente                          |
| Desenhar a imagem em outro tamanho                  | Preserve a proporção e confira as dimensões da imagem carregada        |
| Exportar um SVG baseado em caminhos                 | Escolha e verifique um fluxo separado de geometria ou renderização SVG |

Este guia fixa [p5.js 2.3.4](https://github.com/processing/p5.js/releases/tag/v2.3.4) e o renderizador `P2D`. Usa a API assíncrona atual em vez de copiar um exemplo inicial com `preload()` de um tutorial 1.x. [createCanvas](https://p5js.org/reference/p5/createCanvas/) cria o Canvas do sketch e permite escolher explicitamente o renderizador.

Nessa versão, a [implementação de carregamento de imagens](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) desenha a imagem carregada pelo navegador no Canvas interno de uma `p5.Image`. Isso explica por que manter a extensão `.svg` e ampliar a exibição no Canvas não basta para preservar a edição baseada em caminhos dentro do sketch.

## Salve um SVG original com uma abertura real

Salve este arquivo como `emblem.svg`. Ele tem um caminho, nenhum bitmap incorporado, tamanho declarado de 120 × 120 e um `viewBox` correspondente. O losango externo arredondado e o losango interno são dois contornos dentro desse caminho. `fill-rule="evenodd"` deixa o centro sem pintura; a [referência de fill-rule da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) explica como essa regra determina a área preenchida.

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>
```

A abertura não é um losango branco colocado sobre a forma coral. Essa distinção importa quando o fundo do sketch muda. Se um arquivo existente inclui um elemento `<image>`, examine-o com a [lista de verificação de raster incorporado](https://perfectvector.com/pt-BR/blog/svg-contains-raster-image) antes de supor que toda a arte consiste em caminhos editáveis.

## Carregue com setup assíncrono

Salve esta página completa como `example.html` ao lado de `emblem.svg` e sirva a pasta com um servidor HTTP local. Por exemplo, execute `python3 -m http.server 8000` na pasta e abra `http://localhost:8000/example.html` no navegador.

```html
<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>
```

O bloco de estado aparece após o carregamento e informa a versão p5, as dimensões da imagem carregada e duas amostras de pixels da origem. A amostra central verifica a transparência; a coral verifica uma parte opaca do anel. As chamadas de desenho compartilham uma imagem carregada. Elas não recarregam nem modificam o SVG entre tamanhos de exibição.

A [referência de image](https://p5js.org/reference/p5/image/) distingue o conteúdo de origem da largura e altura de destino. Aqui, cada altura de destino é calculada com `art.height / art.width`, portanto uma imagem substituta não quadrada também mantém suas proporções. Mantenha ambas as dimensões nesse cálculo ao mudar a largura de exibição.

O exemplo define [pixelDensity(1)](https://p5js.org/reference/p5/pixelDensity/) para tornar explícita a comparação do Canvas. Registre a densidade usada no seu sketch real; o padrão pode acompanhar a tela. Aumentar a densidade do Canvas não reconstrói caminhos que já se tornaram uma imagem carregada.

## O que o teste no navegador mostrou

Executamos o arquivo original e este exemplo inicial no Chrome com p5.js 2.3.4, `P2D` e densidade de pixels `1`. A imagem carregada tinha 120 × 120. Sua amostra central era `[0, 0, 0, 0]`, enquanto uma amostra coral interna era `[235, 112, 90, 255]`. O fundo claro do sketch continuou visível pela abertura nos três tamanhos de destino.

| Destino no Canvas | Proporção em relação à imagem carregada | Resultado observado                                                      |
| ----------------- | --------------------------------------- | ------------------------------------------------------------------------ |
| 48 × 48           | 0.4×                                    | Anel pequeno com abertura visível                                        |
| 120 × 120         | 1×                                      | Anel completo nas dimensões carregadas                                   |
| 240 × 240         | 2×                                      | Anel e abertura completos, com bordas ampliadas visivelmente mais suaves |

Essas observações descrevem este arquivo criado, navegador, versão e renderizador. Não são um resultado de compatibilidade para todo SVG exportado, filtro, fonte ou ambiente de terceiros.

**Origem editável e exibição no Canvas**

![Ilustração conceitual de um anel coral editável contornado e três exibições de imagem crescentes sobre um quadriculado visível pelas aberturas.](https://perfectvector.com/blog/p5js-svg-artwork/canvas-and-master.webp)

*Ilustração: os contornos de origem e a imagem exibida têm tarefas separadas. Este diagrama não é uma captura do p5.js, comparação de nitidez ou resultado de conversão.*

Os dados de caminho da origem ficaram inalterados durante todo o teste. Desenhar a imagem a 2× afetou sua exibição, não o atributo `d` em `emblem.svg`. Salve esse original com o projeto para poder preparar outra imagem de entrega depois.

## Corrija o sintoma que você vê

### A imagem nunca aparece

Confira se a URL do SVG é acessível a partir da página servida e se `loadImage()` terminou antes de `image()` executar. O `try/catch` do exemplo coloca uma falha de carregamento no bloco de estado. Uma imagem remota também pode falhar por restrições de segurança do navegador, como observa a documentação de loadImage. Comece com um arquivo de mesma origem que você controla para separar um problema de carregamento de um problema da arte.

Abra o SVG sozinho no navegador. Se sua aparência estiver errada ali também, corrija primeiro a origem. Um PNG renomeado não se torna um documento SVG, e um invólucro SVG ao redor de um bitmap não cria os contornos ausentes.

### A imagem parece esticada

Compare a proporção de destino com `art.width / art.height`. Por exemplo, desenhar uma imagem quadrada em um destino de 240 × 120 a torna deliberadamente duas vezes mais larga em relação à altura. Use o cálculo de proporção do exemplo quando não quiser esticar. Se a própria origem tem espaço vazio excessivo, examine a prancheta e o `viewBox` antes de ampliar a exibição para compensar.

### As bordas ampliadas parecem suaves

Confira as dimensões da imagem carregada, não apenas o tamanho do Canvas. No nosso teste, uma imagem de 120 × 120 foi desenhada em um destino de 240 × 240. Mudar esses argumentos de destino não processa novamente as curvas do SVG por meio de um novo carregamento.

Prepare um SVG de entrega com dimensões explícitas adequadas ao uso, carregue-o novamente e examine o `art.width` e o `art.height` resultantes antes de aceitá-lo. Preserve seu sistema de coordenadas e contornos de origem. Depois compare os menores e maiores tamanhos na tela: mais pixels carregados não tornam uma abertura minúscula legível quando a exibição final é pequena demais.

Se seu sketch precisa de operações de geometria em vez de pintura de imagem, planeje isso separadamente. O [guia de Canvas Path2D](https://perfectvector.com/pt-BR/blog/canvas-path2d-svg) cobre o trabalho com dados de caminhos, enquanto o [guia de SVG no PixiJS](https://perfectvector.com/pt-BR/blog/pixijs-svg-import) compara as rotas de geometria e textura desse mecanismo. Suas APIs não são intercambiáveis com `loadImage()` do p5.

### O centro é branco em vez de transparente

Confira no SVG original se há um fundo pintado ou uma forma interna branca. Nesta origem, o contorno `evenodd` deixa um furo, e o alfa central carregado era zero. Repita a verificação sobre um fundo contrastante do sketch com seu próprio arquivo; uma página de prévia branca pode esconder a diferença.

## Mantenha a exportação do Canvas separada do original SVG

A [referência padrão de saveCanvas](https://p5js.org/reference/p5/saveCanvas/) lista saída de imagem PNG, WebP e JPG. Salvar o Canvas pintado por essa API não recupera os caminhos SVG originais. Mantenha `emblem.svg` separadamente quando precisar de edições futuras de contorno ou de um arquivo de entrega baseado em caminhos. Uma captura de um Canvas aparentemente suave não estabelece um fluxo de exportação SVG editável.

O PerfectVector entra antes quando sua ilustração existe só como PNG ou JPG plano e você precisa de contornos de origem para editar. [Converta a imagem em SVG](https://perfectvector.com/pt-BR/image-to-vector), examine seu contorno e espaço negativo em um editor SVG e repita as verificações reais de carregamento e tamanho no p5. Use diretamente um SVG limpo existente. O traçado não muda a API de imagem do p5 nem transforma sua saída Canvas em um documento de caminhos SVG. O [guia mais amplo de vetorização](https://perfectvector.com/pt-BR/blog/what-is-image-vectorization) explica essa preparação da origem.

Mantenha o original, registre a versão p5 e as dimensões carregadas e aceite o recurso somente depois que sua abertura e bordas funcionarem nos tamanhos usados pelo sketch.

## Perguntas frequentes

**O p5.js pode carregar um SVG com loadImage?**
Sim. Este exemplo p5.js 2.3.4 P2D carrega um SVG original com await loadImage dentro de setup assíncrono. Teste a aparência e as dimensões carregadas do seu próprio arquivo em vez de tratar um carregamento bem-sucedido como compatibilidade SVG completa.

**Uma imagem SVG carregada no p5 continua editável como caminhos?**
A rota de carregamento retorna uma p5.Image e a pinta no Canvas. Mantenha o SVG original separado para editar caminhos de origem. A exibição de imagem no Canvas não fornece um DOM SVG editável para a arte carregada.

**Por que meu SVG no p5 fica borrado quando ampliado?**
Confira as dimensões da imagem carregada em relação às de destino. Nossa imagem carregada de 120 × 120 parecia mais suave a 240 × 240. Prepare uma origem de entrega no tamanho adequado, recarregue-a e examine o resultado real.

**saveCanvas exporta o SVG original?**
A API padrão saveCanvas documenta saída PNG, WebP e JPG. Preserve o original mestre SVG ou verifique um fluxo separado de renderização e exportação SVG para saída baseada em caminhos.

## Fontes

1. [p5.js loadImage](https://p5js.org/reference/p5/loadImage/) — Documenta carregamento de imagem baseado em Promise e restrições do navegador.
2. [Lançamento p5.js 2.3.4](https://github.com/processing/p5.js/releases/tag/v2.3.4) — Identifica a versão fixada e o script CDN oficial.
3. [p5.js createCanvas](https://p5js.org/reference/p5/createCanvas/) — Documenta a criação do Canvas e a escolha do renderizador.
4. [Código de carregamento de imagem do p5.js 2.3.4](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) — Mostra a imagem carregada sendo desenhada no Canvas interno da p5.Image.
5. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Explica como evenodd determina a área preenchida de um caminho composto.
6. [p5.js image](https://p5js.org/reference/p5/image/) — Define posição de imagem e tamanho de destino.
7. [p5.js pixelDensity](https://p5js.org/reference/p5/pixelDensity/) — Documenta a densidade de pixels do sketch e seu padrão dependente da tela.
8. [p5.js saveCanvas](https://p5js.org/reference/p5/saveCanvas/) — Lista os formatos padrão de exportação de imagem do Canvas.

## Explore

- [Read the HTML article](https://perfectvector.com/pt-BR/blog/p5js-svg-artwork)
- [SVG para Canvas: carregue a arte antes de exportar PNG](https://perfectvector.com/pt-BR/blog/svg-canvas-image-export.md)
- [Ícones SVG no MapLibre: pixels e tamanho do símbolo](https://perfectvector.com/pt-BR/blog/maplibre-svg-symbol-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)