Защо да използвате SVG файлове вместо JPG

Предимства на SVG

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

Много уеб дизайнери са удобни с JPG файловия формат и този формат е идеален за изображения, които имат дълбока цветна дълбочина, като например снимки. Докато този формат ще работи и за прости графики, като илюстрирани икони, той не е най-добрият формат, който да се използва в този случай. За тези икони, SVG би бил по-добър избор. Нека да разгледаме точно защо:

SVG е векторна технология

Това означава, че не е растерна технология. Векторни изображения са комбинация от линии, създадени чрез математика. Растерните файлове използват пиксели или малки цветни квадрати. Това е една от причините, поради които SVG е мащабируем и идеален за отзивчиви уеб сайтове, които трябва да се мащабират заедно с размера на екрана на устройството. Тъй като векторни графики съществуват в света на математиката, за да промените размера, просто промените числата. Растерните файлове често изискват сериозна ревизия, когато става дума за оразмеряване. Когато искате да увеличите векторното изображение, няма изкривяване, защото системата е математическа и браузърът просто преизчислява тази математика и прави линиите толкова гладки, както винаги. Когато увеличавате растерното изображение, губите качеството на изображението и файлът започва да се размива, докато започнете да виждате тези пиксели на цвят. Математиката се разширява и се свива, пикселите не го правят. Ако искате снимките ви да бъдат независими от разделителната способност, SVG ще ви даде тази способност.

SVG е базиран на текст

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

SVG е XML и работи в други езикови формати

Това се връща към текстовия код. Можете да направите основното си изображение в SVG и да използвате CSS, за да го полирате. Да, можете да имате изображение, което всъщност е SVG файл, но можете също така да кодирате SVG директно в страницата и да я редактирате в бъдеще. Можете да го промените с CSS по същия начин, по който бихте променили текста на страницата и т.н. Това е много мощен и прави лесна редакция.

SVG лесно се редактира

Това вероятно е най-голямото предимство. Когато заснемете снимка на квадрат, то е това, което е. За да направите промяна, трябва да нулирате сцената и да направите нова снимка. Преди да го разберете, имате 40 изображения на квадратчета и все още нямате право. С SVG, ако направите грешка, променете координатите или думата в текстов редактор и сте готови. Мога да се отнасят до това, защото аз привлече SVG кръг, който не беше позициониран правилно. Всичко, което трябваше да направя, беше да коригирам координатите.

JPG изображенията могат да бъдат тежки

Ако искате изображението ви да расте във физически размер, то също ще нараства в размер на файла. С SVG, един килограм все още е лири, без значение колко голям го правите. Квадрат, широк 2 инча, ще тежи същия като квадрат, който е 100 инча широк. Размерът на файла не се променя, което е отлично от гледна точка на производителността на страницата!

Кое е по-добро?

И така, какво е по-добър формат - SVG или JPG? Това зависи от самото изображение. Това е като да питаш "какво е по-добро, чук или отвертка?" Това зависи от това, което трябва да постигнете! Същото важи и за тези формати на изображения. Ако трябва да покажете снимка, JPG е най-добрият избор за вас. Ако добавяте икона, SVG вероятно е по-добър избор. Можете да научите повече за това кога е подходящо да използвате SVG файловете тук .

Оригинална статия на Дженифър Кринин. Редактиран от Джереми Жиар на 6/6/17