Převod SVG do PNG

Nástroj pro snadný převod SVG souborů nebo textu do PNG formátu s pokročilými funkcemi. Podporuje automatickou detekci rozměrů, šachovnicové pozadí pro náhled a okamžitý převod.

Funkce

• Nahrávání SVG souborů - jednoduše nahrajte .svg soubor
• Vkládání SVG textu - zkopírujte a vložte SVG kód
• Automatická detekce rozměrů - rozměry se automaticky načtou z SVG obsahu
• Nastavitelná velikost - zvolte šířku a výšku výstupního obrázku
• Šachovnicové pozadí - pro lepší viditelnost transparentních oblastí v náhledu
• Barva pozadí - nastavte barvu pozadí pro stažený PNG obrázek
• Okamžitý náhled - automatický převod při změnách
• Stažení - stáhněte PNG soubor s pevnou barvou pozadí

Jak používat

1. Nahrajte SVG soubor - klikněte na tlačítko pro výběr souboru a vyberte .svg soubor
2. Nebo vložte SVG text - zkopírujte SVG kód a vložte ho do textového pole
3. Rozměry se automaticky detekují - šířka a výška se načtou z SVG obsahu
4. Nastavte parametry - upravte rozměry, zvolte pozadí (šachovnicové nebo barva)
5. Náhled se zobrazí automaticky - obrázek se převede okamžitě
6. Stáhněte - klikněte na tlačítko pro stažení PNG souboru

Příklad SVG kódu

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Technické řešení převodu SVG do PNG

Převod SVG do PNG probíhá pomocí HTML5 Canvas API v čistém JavaScriptu. Zde je detailní popis procesu:

1. Detekce rozměrů SVG

function detectSvgDimensions(svgContent) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgContent, 'image/svg+xml');
    const svgElement = doc.querySelector('svg');
    
    if (!svgElement) return null;

    let detectedWidth = svgElement.getAttribute('width');
    let detectedHeight = svgElement.getAttribute('height');
    let viewBox = svgElement.getAttribute('viewBox');

    // Fallback na viewBox pokud width/height nejsou definovány
    if (viewBox) {
        const viewBoxParts = viewBox.split(' ');
        if (viewBoxParts.length === 4) {
            const [, , vbWidth, vbHeight] = viewBoxParts;
            if (!detectedWidth) detectedWidth = vbWidth;
            if (!detectedHeight) detectedHeight = vbHeight;
        }
    }

    if (detectedWidth && detectedHeight) {
        const widthNum = parseFloat(detectedWidth);
        const heightNum = parseFloat(detectedHeight);
        
        if (!isNaN(widthNum) && !isNaN(heightNum) && widthNum > 0 && heightNum > 0) {
            return { width: Math.round(widthNum), height: Math.round(heightNum) };
        }
    }

    return null;
}

2. Vykreslení šachovnicového pozadí

function drawCheckerboard(ctx, width, height) {
    const tileSize = 20;
    const lightColor = '#ffffff';
    const darkColor = '#e0e0e0';

    for (let y = 0; y < height; y += tileSize) {
        for (let x = 0; x < width; x += tileSize) {
            const isEvenRow = Math.floor(y / tileSize) % 2 === 0;
            const isEvenCol = Math.floor(x / tileSize) % 2 === 0;
            const shouldBeDark = isEvenRow ? isEvenCol : !isEvenCol;

            ctx.fillStyle = shouldBeDark ? darkColor : lightColor;
            ctx.fillRect(x, y, tileSize, tileSize);
        }
    }
}

3. Hlavní funkce převodu

async function convertSvgToPng() {
    // Vytvoření canvas elementu
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Nastavení rozměrů canvasu
    canvas.width = width;
    canvas.height = height;

    // Vykreslení pozadí
    if (showCheckerboard) {
        drawCheckerboard(ctx, width, height);
    } else {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, width, height);
    }

    // Vytvoření SVG blob a URL
    const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(svgBlob);

    // Načtení SVG jako obrázek
    const img = new Image();
    
    img.onload = () => {
        // Vykreslení SVG na canvas
        ctx.drawImage(img, 0, 0, width, height);
        
        // Konverze na PNG data URL
        const pngDataUrl = canvas.toDataURL('image/png');
        
        // Uvolnění URL
        URL.revokeObjectURL(url);
        
        // Zobrazení výsledku
        outputImage = pngDataUrl;
    };

    img.onerror = () => {
        URL.revokeObjectURL(url);
        throw new Error('Chyba při načítání SVG');
    };

    img.src = url;
}

4. Stažení s pevnou barvou pozadí

async function downloadImage() {
    // Vytvoření nového canvasu pro stažení
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = width;
    canvas.height = height;

    // Vždy použít pevnou barvu pozadí pro stažení
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // Vykreslení SVG
    const img = new Image();
    const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(svgBlob);

    img.onload = () => {
        ctx.drawImage(img, 0, 0, width, height);
        const downloadDataUrl = canvas.toDataURL('image/png');
        
        // Stažení souboru
        const link = document.createElement('a');
        link.download = 'converted-image.png';
        link.href = downloadDataUrl;
        link.click();
        
        URL.revokeObjectURL(url);
    };

    img.src = url;
}

Klíčové technické aspekty

Canvas API

• 2D Context: Používá getContext('2d') pro vykreslování
• Rozměry: Canvas se nastavuje na požadovanou šířku a výšku
• Vykreslování: SVG se vykresluje pomocí drawImage()

SVG zpracování

• DOMParser: Parsuje SVG string do DOM objektu
• Blob: Vytváří blob z SVG obsahu pro načtení jako obrázek
• URL.createObjectURL: Generuje URL pro blob

Pozadí

• Šachovnicové: Pro náhled transparentních oblastí
• Pevná barva: Pro stažený soubor
• Dva režimy: Náhled vs. stažení

Optimalizace

• Debouncing: Pro text input (500ms zpoždění)
• Memory management: Uvolňování URL objektů
• Error handling: Zachytávání chyb při načítání

Omezení

• Maximální velikost: 4000 × 4000 px
• Podporuje pouze standardní SVG formát
• Převod probíhá v prohlížeči (klientská strana)
• Šachovnicové pozadí pouze pro náhled

Zkusit nástroj