Преобразуване на SVGCSS, Kortic

Съвет: виждате някои доста големи файлове да преминат, силно се препоръчва да конвертирате, преди да конвертирате вашите източници, че вашият файл не съдържа код за тип данни: img/png; base64. В този случай вашето изображение не е векторно ... Относно споделянето: с оглед „споделяне“, изпратените файлове се запазват анонимно и са достъпни за всички. Ако не искате файлът ви да е достъпен, можете да поискате изтриването му тук.

kortic

Говорим за това на UX Planet

SVG преобразуване

Как работи ?

Интегрирането на пиктограми и други лога в уебсайт се извършва по различни начини: svg inline, img и др ... За интеграция чрез CSS можем да го направим и чрез base64, кодиращо съдържанието на SVG в ущърб на наднормено тегло около 30 %.

А за големи обеми SVG и малко повече уеб производителност, друга опция (да отидете) стъпка напред

Пример

Този код ще покаже оранжева пиктограма "+". Веднъж кодиран, XML ще осигури използваем низ от символи в CSS фоново изображение, което ще даде:

Групови примери

Експортирайте "чисти" SVG файлове

По-долу е даден кодът на SVG, който е изпратен на конвертора.

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

Можете да премахнете атрибутите за размер width = "35" height = "35" и форматирането fill = "none" .
За да бъде още по-забавно за използване, ние добавяме viewBox = "0 0 35 35". И хоп, много отзивчив SVG! Но това не е всичко ... Пътят на SVG посочва fill = "# 000" .
Както е, не е проблем, но е безполезно. Пътят без понятие за определен цвят е черен, без значение какво. Иди хоп, ние също го сваляме, това момиче .
Добре, но какво тогава? Е, ние отваряме нашия Illustrator и ще експортираме този файл, но като конфигурираме параметрите малко.

Изберете менюто „Файл› Експортиране ... ›Експортиране за екрани“ (използването на клавишната комбинация ми се струва полезно).

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