PNG спрямо SVG.

Растерни спрямо векторни файлове.

Може би най-фундаменталната разлика между PNG и SVG е, че единият е растерен тип файл, а другият е векторен.

PNG е растерен – тоест базиран на пиксели – формат на изображение. Ако увеличите мащаба на растерно изображение твърде много, то става зърнесто и пикселизирано. По същия начин, ако изображението е твърде малко, то може да стане неясно. Въпреки че PNG файловете са в състояние да обработват много високи разделителни способности, те не могат да се увеличават безкрайно.

От друга страна, SVG файловете са векторни – изградени от сложна математическа мрежа от линии, точки, форми и алгоритми. Те могат да се увеличават до всякакъв размер, без да губят разделителната си способност.

Научете повече за сравнението между растерните и векторните файлове

Размери на файла.

Размерите на PNG файловете често са големи, за да могат да се справят с високата разделителна способност. Техният размер означава, че обработката, споделянето, запазването и отварянето могат да отнемат повече време. Той също така може да забави времето за зареждане на страници, поради което JPEG файловете са по-често срещани за онлайн фотография. Има обаче по-малък, 8-битов вариант на PNG, но той може да поддържа само 256 цвята.

SVG файловете са много по-малки по размер от PNG файловете и е малко вероятно да забавят вашия компютър или уеб сайт. (Въпреки това, много подробните дизайни могат да забавят SVG.) Тъй като те са векторен файлов формат, можете да увеличавате или намалявате мащаба на SVG без загуба на качеството.

Компресия.

SVG файловете предлагат компресия без загуби, което означава, че са компресируеми до по-малки размери на файловете без загуба на разделителна способност, детайлност или качество.

PNG файловете също се възползват от 5 – 20% компресия без загуби, което може да помогне за компенсиране на големия им размер на файла. Въпреки това, е вероятно и след това да бъдат по-големи от SVG файл.

Фотография.

PNG файловете не са често срещан избор за уеб снимки, както споделихме по-горе. Въпреки това, те могат да се справят с много детайлни и висококачествени цифрови снимки за печат, редактиране и други цели. Те са често срещан файлов формат в Adobe Photoshop.

SVG файловете от друга страна, не използват пиксели, така че изпитват затруднения да покажат снимка с високо качество.

Използване в мрежата.

Както PNG, така и SVG файловете могат да показват сложни нива на детайлност за уеб графики, илюстрации, лога, инфографики и таблици.

Въпреки това, SVG има ключово предимство със своя език за програмиране XML. Това означава, че всеки показан SVG файл е написан в текст, а не в код. В резултат на това екранните четци и търсачките могат да ги анализират – така че те са чудесни за целите на достъпност и SEO.

SVG файловете също така обикновено са по-малки, което ги прави по-бързи за зареждане на страница. Времето за зареждане на страницата е друг критичен елемент в класирането в търсачките.

PNG файловете също поддържат някои текстови графики, но не в същата степен.

Съвместимост и комплексност.

SVG файловете се считат за по-усъвършенстван тип файл от PNG файловете, но всъщност не са съвместими с всеки браузър и операционна система. Освен това техният език на програмиране и векторно-базирана композиция могат да бъдат непознати и плашещи за новите потребители.

PNG файловете от друга страна, са стандартен онлайн формат, който е широко поддържан от уеб браузъри и операционни системи.

Анимация.

PNG файловете не поддържат анимация – за разлика от подобния GIF файл с растерни изображения.

SVG файловете поддържат анимация, но не толкова лесно, колкото други типове файлове като стандартния формат AI на Adobe Illustrator.

Научете повече за AI файловете

Прозрачност.

PNG и SVG файловете поддържат прозрачност, затова и двата са отличен избор за онлайн лога и графики.

Струва си да се отбележи, че PNG файловете са един от най-добрите избори за прозрачен растерен файл. Ако работите с пиксели и прозрачност, PNG файловете са по-добър вариант от SVG файловете.

1. Отворете Adobe Illustrator.
2. Щракнете върху File (Файл) > Open (Отвори) и изберете изображението от компютъра си.
3. Щракнете върху Open (Отвори).
4. Щракнете върху опцията Trace (Проследяване) от горното меню и изберете Image Trace (Проследяване на изображение).
5. Настройте конвертиране според вашите спецификации – това може да включва промяна на цвета.
6. След като процесът приключи, изберете вашето изображение за проследяване и щракнете върху Ungroup (Разгрупиране). Това ще раздели цветните ви форми.
7. Щракнете върху File (Файл) > Export (Експортиране).
8. Запазете файла си като SVG.

1. Отворете Adobe Photoshop.
2. Щракнете върху File (Файл) > Open (Отвори).
3. Изберете SVG от вашия компютър.
4. Щракнете върху Export (Експортиране) > Export As (Експортиране като) > PNG.
5. Запазете файла си като PNG.