Sharp SVG zu PNG: Größe, Dichte und scharfe Exporte

Beginne in einer aktuellen Sharp-Verarbeitung bei jedem Export mit dem SVG und rufe resize() mit der tatsächlich benötigten Pixelbreite auf. Wenn du eine 2x-Datei brauchst, fordere doppelt so viele Ausgabepixel an. Erstelle nicht zuerst ein kleines PNG und vergrößere anschließend diese Datei. Übernimm außerdem keine alte density-Lösung in jeden Ablauf: Unser Test mit Sharp 0.34.4 renderte mit und ohne höhere Eingabedichte dieselben Pixel.

Rendere ein 1x- und 2x-PNG aus dem SVG

Der Sharp-Konstruktor akzeptiert eine SVG-Datei oder einen Buffer, und seine resize-API legt die Ausgabeabmessungen fest. Für ein quadratisches Icon mit 64 Einheiten, das mit 256 CSS-Pixeln erscheinen soll, exportierst du ein 256-Pixel-PNG für 1x und ein 512-Pixel-PNG für einen 2x-Anwendungsfall:

import sharp from "sharp";
 
const source = "icon.svg";
 
await Promise.all([
  sharp(source).resize({ width: 256 }).png().toFile("icon-1x.png"),
  sharp(source).resize({ width: 512 }).png().toFile("icon-2x.png"),
]);

Wenn du die Höhe weglässt, bleibt beim üblichen Resize-Verhalten von Sharp das Seitenverhältnis der Quelle erhalten. Wähle tatsächliche Ausgabebreiten für dein Ziel; „2x“ bezieht sich auf Pixelabmessungen relativ zur vorgesehenen CSS-Darstellungsgröße, nicht auf ein SVG-Attribut oder ein Versprechen für jeden Bildschirm. Wenn du das Icon mit 256 CSS-Pixeln sehen möchtest, vergleiche die PNGs mit 256 und 512 Pixeln in dieser Darstellungsgröße und entscheide, ob sich die größere Datei lohnt.

Unser eigenes Testicon deklarierte width="64" height="64" viewBox="0 0 64 64". Wir renderten es mit der im Repository festgelegten Version Sharp 0.34.4 auf 64, 512 und 1.024 Pixel. Die Ausgaben mit 512 und 1.024 Pixeln wurden aus dem SVG erzeugt, hatten transparente Ecken und deckende gezeichnete Mittelpunkte und meldeten die angeforderten Abmessungen. Das sind Beobachtungen für diese Testgrafik und Version, kein Benchmark aller SVG-Grafiken.

Eigener Rendering-Test mit Sharp 0.34.4

Die Abbildung macht den Fehler konkret: Sobald die erste Ausgabe ein PNG mit 64 Pixeln ist, interpoliert eine spätere Größenänderung diese Pixel. Es hat keine Pfade mehr, die neu gezeichnet werden könnten. Unsere direkten und dichteangepassten Ergebnisse mit 512 Pixeln waren in diesem Test über die rohen RGBA-Kanäle identisch. Quell-SVG, Rendering-Skript und Ergebnismetadaten werden im Recherchepaket des Artikels aufbewahrt.

Brauchst du density in Sharp?

Die Konstruktoroption density von Sharp steuert die DPI beim Einlesen von SVG- oder PDF-Eingaben; ihr dokumentierter Standardwert ist 72. Das ist etwas anderes als eine endgültige Breite in resize() anzufordern. Möglicherweise findest du ältere Sharp-Beispiele, die die Eingabedichte erhöhen, um weiche Vergrößerungen zu vermeiden. Sie beschreiben ein echtes historisches Symptom: Sharp-Issue #1421 berichtet 2018 von einem 32-Pixel-SVG, das bei Vergrößerung auf 512 Pixel verpixelt wurde. Sie beweisen nicht, dass diese Umgehung bei einer aktuellen Installation weiterhin nötig ist.

Wir testeten genau dieses Paar mit Sharp 0.34.4:

const direct = await sharp("icon.svg")
  .resize({ width: 512 })
  .png()
  .toBuffer();
 
const densityFirst = await sharp("icon.svg", { density: 576 })
  .resize({ width: 512 })
  .png()
  .toBuffer();

Bei unserem 64-Pixel-Vektoricon lieferten beide Abläufe dieselben RGBA-Pixel mit 512 × 512. Setze Eingabedichte nur dann, wenn eine bestimmte Datei und die installierte Sharp-Version einen Bedarf zeigen, und wiederhole den Vergleich nach Upgrades. Behandle eine höhere DPI-Zahl nicht als universellen Schärfeschalter. Die nützliche erste Frage lautet, ob noch Vektorgeometrie vorhanden ist, wenn Sharp das endgültige PNG rendert.

Wenn du auch mit PDFs arbeitest, teste diese Eingabe separat: Dieses SVG-Experiment belegt kein PDF-Verhalten. Ebenso beschreibt withDensity() in neuerer Sharp-Dokumentation DPI-Metadaten der Ausgabe; das ist eine andere Operation als die SVG-Eingabe-Rendering-Dichte des Konstruktors.

Prüfe Abmessungen, Transparenz und Quellinhalt

Verwende Sharps Metadaten-API auf der Ausgabe, statt anhand des Vorschau-Zooms zu raten:

const oneX = await sharp("icon-1x.png").metadata();
const twoX = await sharp("icon-2x.png").metadata();
 
console.log({
  oneX: [oneX.width, oneX.height, oneX.hasAlpha],
  twoX: [twoX.width, twoX.height, twoX.hasAlpha],
});

Für die quadratische Testgrafik hier sind 256 × 256 und 512 × 512 die erwarteten Abmessungen. hasAlpha zeigt einen Alpha-Kanal an, beweist aber nicht, dass eine bestimmte Ecke transparent ist. Prüfe die Datei oder erfasse Pixelwerte, wenn Transparenz für die Übergabe wichtig ist. Das Ecken-Alpha unserer Testgrafik war null und das Mittelpunkt-Alpha 255 in allen getesteten Ausgaben. Ein weißes Rechteck im SVG würde stattdessen in jedes PNG gezeichnet, unabhängig vom PNG-Format.

Wenn ein frisch erstelltes großes Rendering weiterhin verpixelt ist, prüfe den SVG-Inhalt. Der SVG-Standard erlaubt ein <image>-Element, das ein Rasterbild einbettet oder verlinkt. Eine Datei kann daher die Endung .svg haben, während die Grafik darin weiterhin ein niedrig aufgelöstes PNG ist. Unser Leitfaden zum Finden von Rasterbildern in SVGs zeigt, wie du Objekte und XML prüfst. Eine größere Sharp-Ausgabebreite kann diese eingebetteten Pixel nicht in Pfade verwandeln.

Prüfe auch die Zielumgebung. Eine Datei mit 512 Pixeln, die mit 1.024 Pixeln dargestellt wird, kann weich aussehen. Ein Betrachter, der weit über 100 % hinauszoomt, macht das PNG-Raster auch bei korrektem Export sichtbar. Vergleiche in der tatsächlichen Darstellungsgröße und vor dem tatsächlichen Hintergrund und entscheide dann, ob du ein größeres PNG oder das SVG selbst auslieferst. Für die Webausgabe bieten Inline-SVG und SVG in einem Bildelement unterschiedliche Integrationsmöglichkeiten; keines erfordert ein PNG, wenn das Ziel SVG unterstützt.

Wo PerfectVector ins Spiel kommt

Sharp rasterisiert ein SVG; es rekonstruiert keine bearbeitbaren Pfade aus einem PNG. Wenn deine Mastergrafik nur ein Rastericon oder -logo ist, erstelle und prüfe ein SVG vor diesem Exportablauf. Der Leitfaden für PNG-Icons zu einem SVG-UI-Kit behandelt einheitliche Geometrie und Ausgabeprüfungen innerhalb eines Sets. PerfectVectors Bild-zu-Vektor-Ablauf kann aus reiner Rastergrafik einen SVG-Kandidaten erstellen. Öffne dieses Ergebnis, prüfe Silhouette, kleine Details und ob es tatsächliche Pfade enthält, und rendere dann deine 1x- und 2x-PNGs aus dem freigegebenen SVG. Wenn du bereits ein sauberes Original-SVG besitzt, behalte es und verwende Sharp direkt.

FAQ

Warum sieht meine SVG-zu-PNG-Ausgabe aus Sharp unscharf aus? Prüfe, ob der Ablauf zuerst ein kleines PNG erzeugt und es dann vergrößert hat. Untersuche danach das SVG auf eingebettete Rasterinhalte und vergleiche das ausgelieferte PNG in seiner tatsächlichen Darstellungsgröße. Teste bei einer aktuellen Sharp-Version das direkte Rendering vom SVG auf die Endgröße, bevor du eine Eingabedichte-Umgehung hinzufügst.

Ist density: 576 für eine achtfache Vergrößerung erforderlich? Bei unserer SVG-Testgrafik von 64 auf 512 Pixel unter Sharp 0.34.4 war es nicht erforderlich: Direkte und dichteangepasste Größenänderung erzeugten identische RGBA-Pixel. Dein SVG und installierter Renderer können sich anders verhalten. Teste deshalb genau diese Eingaben, statt die Zahl als Regel zu übernehmen.

Wie erstelle ich ein transparentes 2x-PNG? Rendere das SVG mit dem Doppelten der vorgesehenen CSS-Abmessungen und exportiere es als PNG. Bestätige die resultierende Breite und Höhe und prüfe dann einen ungezeichneten Bereich auf Transparenz. Eine transparente Zeichenfläche entfernt keine Hintergrundform, die bereits im SVG vorhanden ist.

Quellen

1. Sharp — Konstruktor — SVG-Eingabeunterstützung und die Eingabeoption density.
2. Sharp — Bildgrößen ändern — In den Beispielen verwendetes Ausgabegrößenverhalten.
3. Sharp — Eingabemetadaten — Prüfungen von Abmessungen und Alpha-Metadaten.
4. Sharp GitHub — SVG-zu-PNG-Verpixelung, Issue #1421 — Historisch gemeldetes Symptom, ausdrücklich vom Test mit festgelegter aktueller Version getrennt.
5. Sharp — Ausgabeoptionen — Unterscheidet neuere Dichtemetadaten der Ausgabe von der Rendering-Dichte der Eingabe.
6. W3C — Eingebettete SVG-2-Inhalte — Erklärt, warum ein SVG Rasterpixel enthalten kann.

Wenn die Masterdatei nur Rastergrafik enthält, erstelle mit PerfectVector einen SVG-Kandidaten, prüfe seine Pfade und rendere die freigegebene Datei mit Sharp in jeder benötigten PNG-Größe.