Vector- vs. rasterinhoud in PDF's
PDF's kunnen zowel vector- als rasterinhoud bevatten, vaak op dezelfde pagina. Begrijpen welk type je PDF bevat, bepaalt wat je kunt verwachten van de SVG-conversie:
| Inhoudstype | Voorbeelden | In SVG-uitvoer |
|---|---|---|
| Vectorpaden | Logo's, pictogrammen, lijnkunst, diagrammen | Bewerkbare SVG-paden, schaalbaar naar elke grootte |
| Tekst | Koppen, hoofdtekst, labels | Tekstelementen of padcontouren |
| Rasterafbeeldingen | Foto's, gescande inhoud | Ingesloten als base64-afbeeldingsdata |
| Kleurovergangen | Kleurovergangseffecten, schaduwen | SVG-gradientmenten |
| Knipmaskers | Bijgesneden afbeeldingen, gevormde tekst | SVG clipPath-elementen |
Beste kandidaten voor PDF naar SVG: PDF's gemaakt met Adobe Illustrator, InDesign, CorelDRAW of andere vectorontwerpsoftware. Deze bevatten echte vectorpaden die prachtig naar SVG converteren. Gescande documenten leveren slechte SVG-uitvoer op omdat de inhoud al gerasteriseerd is.
Tekstverwerking: paden vs. tekstelementen
Tekst in de SVG-uitvoer kan op twee manieren worden weergegeven:
Tekst als padcontouren
Elk teken wordt geconverteerd naar vectorpaddata (de werkelijke lettervorm). Dit garandeert dat de tekst er precies hetzelfde uitziet als het origineel, ongeacht geïnstalleerde lettertypen. Het nadeel is dat de tekst niet meer doorzoekbaar of selecteerbaar is als tekst — het is puur een visuele weergave.
Tekst als SVG-tekstelementen
Tekens worden als <text>-elementen in de SVG opgeslagen. De tekst blijft doorzoekbaar, selecteerbaar en bewerkbaar. Het uiterlijk is echter afhankelijk van de beschikbaarheid van het juiste lettertype. Als het lettertype niet beschikbaar is, vervangt de browser of editor het door een ander lettertype, wat de opmaak kan veranderen.
Wanneer je welke aanpak gebruikt:
- Padcontouren: Wanneer visuele getrouwheid doorslaggevend is (logo's, huisstijl, definitieve afbeeldingen). De uitvoer ziet er overal identiek uit.
- Tekstelementen: Wanneer je de tekstinhoud wilt bewerken, wilt gebruiken voor SEO (webinsluiting) of toegankelijkheid nodig hebt (schermlezers).
Structuur van de SVG-uitvoer
Het resulterende SVG-bestand is een standaard XML-document dat in elke SVG-compatibele toepassing geopend kan worden. De structuur omvat doorgaans:
- Root-
<svg>-element: Definieert de viewportafmetingen die overeenkomen met de oorspronkelijke PDF-paginagrootte <defs>-sectie: Bevat herbruikbare definities zoals kleurovergangen, patronen en knippaden<g>-groepen: Elementen georganiseerd in logische groepen, vaak overeenkomend met lagen in de originele PDF<path>-elementen: De werkelijke vectorvormen, gedefinieerd met SVG-paddata (M, L, C, Z-opdrachten)<image>-elementen: Ingesloten rasterafbeeldingen (base64-gecodeerd of externe verwijzingen)
De SVG-uitvoer bewerken
SVG-bestanden kunnen worden bewerkt in een verscheidenheid aan tools:
- Adobe Illustrator: Volledige professionele vectorbewerking. Open SVG rechtstreeks, bewerk paden, pas kleuren aan, voeg elementen toe of verwijder ze. Het beste voor complexe grafische werkzaamheden.
- Inkscape: Gratis, open-source vectoreditor. Uitstekende SVG-ondersteuning omdat SVG het native formaat is. Ideaal voor logoextractie en diagrambewerking.
- Figma: Importeer SVG voor UI/UX-ontwerp. Handig voor het extraheren van pictogrammen en ontwerpelementen uit PDF-stijlgidsen.
- Code-editors: SVG is XML, dus je kunt het direct bewerken in VS Code, Sublime Text of een andere tekstverwerker. Handig voor het verwijderen van onnodige elementen, het optimaliseren van de bestandsgrootte en webinsluiting.
Optimalisatietips
Geconverteerde SVG-bestanden bevatten vaak onnodige data die de bestandsgrootte vergroot zonder de kwaliteit te verbeteren. Hier zijn veelvoorkomende optimalisatiestappen:
- Verwijder metadata: PDF-conversietools kunnen metadata, opmerkingen en verwerkingsinstructies insluiten. Verwijder deze om de bestandsgrootte te verkleinen.
- Vereenvoudig paden: Complexe curven met veel controlepunten kunnen worden vereenvoudigd met tools zoals SVGO of de opdracht Pad vereenvoudigen in Illustrator. Dit verkleint de bestandsgrootte met minimale visuele impact.
- Verwijder verborgen elementen: Sommige conversies produceren verborgen of buiten-canvas-elementen. Verwijder alles buiten de viewBox.
- Voeg overlappende vormen samen: Afzonderlijke vormen die samen één visueel element vormen, kunnen worden samengevoegd met booleaanse bewerkingen (Vereniging in Inkscape, Padzoeker in Illustrator).
- Optimaliseer voor het web: Gebruik SVGO of vergelijkbare tools om de SVG te minimaliseren (verwijder witruimte, verkort paddata, optimaliseer transformaties) voor webinsluiting.
Veelvoorkomende toepassingen
Logoextractie: Extraheer bedrijfslogo's uit PDF-merkrichtlijnen of briefpapier. Het vectorformaat zorgt ervoor dat het logo perfect schaalt naar elke gewenste grootte.
Diagrambewerking: Converteer technische diagrammen, stroomdiagrammen en schema's uit PDF-documentatie naar SVG voor aanpassing en hergebruik.
Webafbeeldingen: Converteer PDF-illustraties naar SVG voor webinsluiting. SVG wordt scherp weergegeven op alle schermresoluties (Retina, 4K) zonder dat je meerdere afbeeldingsformaten nodig hebt.
Drukvoorbereiding: Extraheer vectorillustraties uit PDF's voor gebruik in nieuwe drukprojecten, zodat je maximale kwaliteit garandeert bij elke drukgrootte.