Конвертор од SVG во PNG

Како да конвертирате SVG во PNG

Залепете го вашиот SVG код во полето за внесување, по потреба прилагодете го факторот на скала и кликнете на "Конвертирај во PNG". Алатката го анализира SVG, го рендерира на HTML5 Canvas елемент и го извезува canvas-от како PNG слика. Прегледот ја прикажува конвертираната слика и можете да ја преземете со еден клик. Целиот процес се одвива во вашиот прелистувач. Вашиот SVG код никогаш не се пренесува до никаков сервер, што ја прави оваа алатка безбедна за сопственички логоа, икони и дизајнерски ресурси.

Факторот на скала ја контролира излезната резолуција. Скала од 1x произведува PNG со нативните димензии на SVG дефинирани со неговиот viewBox или атрибутите width/height. Скала од 2x ги удвојува димензиите, што е идеално за Retina и екрани со висока резолуција. Повисоките скали произведуваат поголеми и подетални слики погодни за материјали за печатење. Панелот со статистики ги прикажува излезните димензии, бројот на SVG елементи и големината на оригиналната SVG датотека за да можете да ја оцените сложеноста и големината на вашата графика.

SVG наспроти PNG: кога да се користи секој формат

SVG и PNG служат различни цели и разбирањето кога да се користи секој е важно за веб перформансите и визуелниот квалитет. SVG е векторски формат кој ги опишува формите математички користејќи XML. Се прилагодува на која било големина без губење квалитет, што го прави совршен за логоа, икони, илустрации, графикони и секој визуелен елемент кој треба да биде остар на повеќе големини. SVG датотеките често се помали од еквивалентните растерски слики за едноставни графики и можат да се стилизираат со CSS, анимираат со JavaScript и да се направат пристапни со правилно означување.

PNG е растерски формат кој ги складира сликите како мрежа од пиксели. Поддржува компресија без загуби и транспарентност, правејќи го стандарден формат за снимки на екран, сложени слики со текст и графики кои треба да се прикажат во околини кои не го поддржуваат SVG. PNG сликите имаат фиксна резолуција, затоа можат да изгледаат матно кога се зголемуваат надвор од оригиналните димензии. За фотографии, JPEG или WebP генерално нудат подобра компресија, но PNG останува најдобар избор кога е потребна транспарентност или рендерирање на текст со точност до пиксел.

Како функционира конверзијата преку Canvas API

Процесот на конверзија го користи вградениот SVG мотор за рендерирање на прелистувачот и HTML5 Canvas API. Прво, SVG означувањето се конвертира во URL на податоци. Се создава Image елемент со овој URL на податоци како извор. Откако сликата ќе се вчита, таа се црта на Canvas елемент со специфицираната скала. Методата toDataURL('image/png') на Canvas потоа ги извезува рендерираните пиксели како PNG кодиран во base64. Овој пристап го користи нативниот SVG мотор за рендерирање на прелистувачот, кој ги обработува сложените SVG функции вклучувајќи градиенти, филтри, текст, маски за исечување и вградени фонтови.

Ограничувања и размислувања

Некои SVG функции може да не се конвертираат совршено во зависност од прелистувачот. Надворешните ресурси референцирани во SVG, како поврзани стилски листови, фонтови вчитани преку @font-face или слики референцирани преку URL, може да не бидат достапни за време на canvas рендерирањето поради ограничувања на вкрстено потекло. За најдобри резултати, вградете ги сите ресурси директно во SVG користејќи inline стилови, вградени фонтови и URI на податоци за слики. SVG кои зависат од CSS анимации или JavaScript интеракции ќе бидат зафатени како статичен снимок во нивната почетна состојба.

Често поставувани прашања

Зошто да конвертирате SVG во PNG?

Не сите платформи го поддржуваат SVG. Клиентите за е-пошта, некои платформи за социјални мрежи и постарите софтвери бараат растерски формати како PNG. PNG ја зачувува транспарентноста, што го прави идеален за логоа на различни позадини.

Дали оваа алатка е доверлива?

Да. Се одвива целосно во вашиот прелистувач преку Canvas API. Никакви податоци не се испраќаат до сервер. Вашиот SVG код и конвертираните слики остануваат целосно на вашиот уред.

Која скала да се користи?

1x за стандардни екрани, 2x за Retina и екрани со висока резолуција, 3x за печатење. Повисоките скали произведуваат поголеми датотеки. Изберете врз основа на намената на PNG.

Може ли да конвертирам анимирани SVG?

Алатката зафаќа статичен снимок на почетната состојба на SVG. SMIL и CSS анимациите не се зачувуваат во PNG излезот. За анимирана содржина, разгледајте GIF или видео формати.

Кои прелистувачи ја поддржуваат оваа алатка?

Сите модерни прелистувачи со поддршка за Canvas API: Chrome, Firefox, Safari, Edge и Opera на десктоп и мобилни уреди. Користете ја најновата верзија за најдобри резултати.