En god eksport starter der bildet skal brukes. Denne veiledningen forklarer hvordan du velger en skala, klargjør SVG-en din og sjekker PNG-en før du bruker den.
1. Start med mottakssystemet
Før du konverterer, sjekk pikseldimensjonene som kreves av nettsiden, dokumentet, e-postsystemet eller designapplikasjonen som skal motta bildet. Dette verktøyet skalerer de gjengitte dimensjonene til SVG-en med en valgt multiplikator; det gir ikke egendefinerte felt for bredde og høyde. Hvis en plattform ber om 1200 piksler i bredden, kan du sammenligne det målet med SVG-ens viste bredde og velge en multiplikator som kommer nær uten å skape en unødvendig stor fil.
2. Forstå skalafaktorene
Valgene er 1x, 2x, 3x, 4x og 8x. En multiplikator påvirker både bredde og høyde: en kilde på 200 × 100 gjengitt ved 2x blir 400 × 200 piksler. Pikselantallet vokser med kvadratet av multiplikatoren, slik at 8x produserer 64 ganger så mange piksler som 1x. Større utdata kan bruke mye mer mer minne og ser kanskje ikke bedre ut når den opprinnelige illustrasjonen eller måldisplayet ikke trenger det.
3. Velg en faktor for skjermer
For standard grensesnittgrafikk er 1x eller 2x ofte et praktisk utgangspunkt; 2x kan hjelpe på skjermer med høy tetthet når måloppsettet skalerer bildet ned. Velg 3x eller 4x bare når designet trenger de ekstra pikseldimensjonene. Bruk 8x selektivt fordi svært store lerreter kan ta lengre tid å gjengi eller overskride nettleserens grenser.
4. Bestem om bakgrunnen skal være gjennomsiktig
Velg Gjennomsiktig når PNG-en må ligge over en farget side, en presentasjon eller et annet bilde. Velg Hvit når mottakssystemet forventer et hvitt rektangel eller når en ensfarget bakgrunn gjør det enklere å inspisere illustrasjonen. PNG støtter gjennomsiktighet, men en målapplikasjon kan vise gjennomsiktige piksler over et sjakkbrettmønster eller flate dem ut når du setter inn bildet.
5. Klargjør SVG-en før eksport
Åpne kilden i et vektoreditor og sjekk at den har en fornuftig viewBox og synlig illustrasjon inne i den viewBox-en. Konverter eller innebygd skrifter hvis designet må se identisk ut på enheter uten disse skriftene. Hold tilknyttede bilder og eksterne ressurser tilgjengelige; denne nettleserkonvertereren gjengir kanskje ikke eksterne skrifter, tilknyttede bilder, skript eller andre eksterne avhengigheter fra en SVG-fil.
6. Konverter og inspiser forhåndsvisningen
Velg én SVG-fil, velg en skala og bakgrunn, og konverter den deretter. Sjekk at hele tegningen er synlig, at tekst og tynne streker forblir lesbare, og at forhåndsvisningen har den forventede bakgrunnen. Hvis resultatet er avskåret, sjekk SVG viewBox og dimensjoner i den opprinnelige filen. Konvertereren behandler én fil om gangen og tilbyr en PNG-nedlasting for den filen.
7. Sjekk piksler og filstørrelse
Bruk PNG-en i sin tiltenkte sammenheng og inspiser den i den størrelsen den faktisk vil vises i. En stor pikseldimensjon forbedrer ikke automatisk et lite ikon på skjermen. Hvis PNG-en er for stor, går du tilbake til SVG-en og eksporterer med en lavere faktor. Hvis den ser myk ut, må du bekrefte at mottakssystemet ikke forstørrer et lite rasterbilde etter konvertering.
8. Ta vare på den redigerbare kilden
Lagre den opprinnelige SVG-en ved siden av PNG-en. SVG bevarer vektorsbaner og er vanligvis bedre for senere redigeringer, fargeendringer og endring av størrelse. PNG er en praktisk kopi med fast størrelse for mottakere som trenger rasterbilder. Ved å beholde begge kan du opprette en ny PNG i en annen størrelse uten å skalere et allerede rasterisert bilde gjentatte ganger.