Cara Mengonversi SVG ke PNG (Browser, Terminal, dan Kode)

SVG adalah format vektor — skala sempurna ke ukuran berapa pun. PNG adalah format raster — kisi piksel tetap, tapi itulah yang diterima oleh kebanyakan aplikasi, klien email, dan media sosial. Konversinya terdengar sederhana, tapi ada beberapa pilihan penting: resolusi ekspor, penanganan transparansi, dan cara menangani font eksternal.

Di browser

Seret atau tempel file SVG ke dalam konverter, atur lebar target, dan unduh PNG. Alat ini merender SVG menggunakan mesin browser sendiri — jalur rendering yang sama saat Anda melihat SVG di halaman web — lalu mengekspornya ke kanvas PNG.

Ini adalah opsi tercepat untuk konversi sekali pakai dan menangani sebagian besar SVG dengan benar.

Terminal: Inkscape

Inkscape adalah renderer SVG paling akurat di luar browser — menggunakan mesin rendering yang sama (cairo) dan menangani fitur SVG seperti filter, mask, dan teks pada jalur dengan benar.

# Install
brew install inkscape           # macOS
sudo apt install inkscape       # Ubuntu

# Konversi ke PNG pada 96 DPI (resolusi layar default)
inkscape input.svg --export-filename=output.png

# Ekspor pada lebar tertentu dalam piksel
inkscape input.svg --export-filename=output.png --export-width=512

# Ekspor pada 2× (high-DPI / retina)
inkscape input.svg --export-filename=output.png --export-width=512 --export-dpi=192

# Ekspor area tertentu (x:y:lebar:tinggi dalam unit SVG)
inkscape input.svg --export-filename=output.png --export-area=0:0:100:100

Untuk server headless, tambahkan --export-type=png:

inkscape input.svg --export-type=png --export-filename=output.png --export-width=1024

Terminal: ImageMagick

Dukungan SVG ImageMagick bergantung pada librsvg atau Inkscape di baliknya (tergantung instalasi). Praktis untuk pemrosesan massal.

# Install
brew install imagemagick        # macOS
sudo apt install imagemagick    # Ubuntu

# Konversi dasar
convert input.svg output.png

# Konversi pada kepadatan tertentu (lebih tinggi = output lebih besar)
convert -density 150 input.svg output.png

# Ubah ukuran ke lebar tertentu
convert input.svg -resize 512x output.png

# Konversi massal semua SVG dalam folder
for f in *.svg; do convert "$f" "${f%.svg}.png"; done

Catatan: Renderer SVG bawaan ImageMagick bersifat dasar dan mungkin tidak merender SVG kompleks (filter, gradien, mask) dengan benar. Untuk file kompleks, gunakan Inkscape:

inkscape "$f" --export-filename="${f%.svg}.png" --export-width=512

Terminal: rsvg-convert (librsvg)

rsvg-convert ringan dan cepat, cocok untuk SVG sederhana tanpa filter kompleks.

# Install
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Ubuntu

# Konversi pada 96 DPI
rsvg-convert input.svg -o output.png

# Konversi pada 2× resolusi (192 DPI untuk retina)
rsvg-convert -d 192 -p 192 input.svg -o output.png

# Konversi ke lebar tertentu
rsvg-convert -w 512 input.svg -o output.png

Node.js: sharp

sharp dapat merasterisasi file SVG menggunakan libvips.

npm install sharp

const sharp = require('sharp');

// Konversi SVG ke PNG dengan lebar 512px
sharp('input.svg')
    .resize(512)
    .png()
    .toFile('output.png')
    .then(info => console.log(`Output: ${info.width}×${info.height}`));

Konversi massal berbagai ukuran:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './icons/svg';
const outputDir = './icons/png';

fs.readdirSync(inputDir)
    .filter(f => f.endsWith('.svg'))
    .forEach(file => {
        const name = path.basename(file, '.svg');
        for (const size of [16, 32, 64, 128, 256, 512]) {
            sharp(path.join(inputDir, file))
                .resize(size)
                .png()
                .toFile(path.join(outputDir, `${name}-${size}.png`));
        }
    });

Python: cairosvg

cairosvg menggunakan mesin rendering cairo yang sama dengan Inkscape.

pip install cairosvg

import cairosvg

# Konversi ke PNG pada resolusi default
cairosvg.svg2png(url='input.svg', write_to='output.png')

# Konversi pada lebar tertentu
cairosvg.svg2png(url='input.svg', write_to='output.png', output_width=512)

# Konversi dari string
svg_content = open('input.svg').read()
cairosvg.svg2png(bytestring=svg_content.encode(), write_to='output.png', output_width=512)

Panduan resolusi

SVG bersifat bebas resolusi. Saat mengekspor ke PNG, Anda harus memilih ukuran piksel:

Untuk penggunaan web, ekspor pada 2× ukuran CSS tampilan dan sajikan PNG menggunakan srcset dengan 2x.

Menangani transparansi

SVG mendukung transparansi secara native. PNG mendukung alpha channel penuh. Konversi mempertahankan transparansi — hasilnya PNG dengan latar transparan, bukan putih, selama SVG tidak memiliki persegi panjang latar belakang eksplisit.

Jika perlu latar putih:

# ImageMagick: ratakan ke putih sebelum konversi
convert -background white -alpha remove input.svg output.png

// sharp: ratakan dengan latar putih
sharp('input.svg')
    .flatten({ background: { r: 255, g: 255, b: 255 } })
    .png()
    .toFile('output-white-bg.png');

Poin utama

• Untuk konversi sekali pakai, alat berbasis browser adalah pilihan tercepat.
• Untuk penggunaan terminal, Inkscape memberikan rendering paling akurat untuk SVG kompleks.
• Untuk pemrosesan massal di Node.js, sharp cepat dan menangani sebagian besar SVG dengan benar.
• Untuk pemrosesan massal di Python, cairosvg menggunakan renderer yang sama dengan Inkscape.
• Ekspor pada 2× ukuran CSS tampilan untuk layar retina/high-DPI.
• PNG mempertahankan transparansi — tidak perlu menambahkan latar putih kecuali memang diinginkan.