Промяна на цвета на svg css. Оформяне на SVG с CSS: Характеристики и ограничения

Подготвя се SVGЗа използване в мрежата това е много прост процес, не по-сложен от експортирането на JPEG или PNG. Използвайте какъвто и да е графичен редактор, с който сте запознати (Illustrator, Sketch, Inkscape [безплатно] и т.н. [или дори Photoshop, ако използвате слоеве с форми]) с размера на изображението, който планирате да използвате. Обикновено работя в Illustrator, така че ще обясня някои от начините за подготовка на файлове в тази програма, но те обикновено се отнасят за всяка програма. Може да искате да конвертирате текста си в криви, тъй като шрифтът най-вероятно ще се визуализира неправилно, освен ако не планирате да ги стилизирате с уеб шрифта, използван на страницата (което е възможно!). Също така не е добра идея да конвертирате всички обекти в единични форми, особено ако имате щрихи, които ще трябва да се манипулират на страницата, особено след като конвертирането на обекти често не намалява размера на файла. Всички имена, присвоени на групи или слоеве, ще бъдат добавени към SVG като идентификатор на елемент. Това е доста удобно за оформяне, но ще увеличи общ размерфайл.

Преди да експортирате, трябва да проверите дали всички изображения са в мрежа с цели пиксели (това е, например, не 23,3px × 86,8px). В противен случай най-вероятно изображението няма да има достатъчно яснота и част от изображението ще бъде отрязана. В Illustrator това може да стане по следния начин: Object > Artboards > Fit to Artwork Bounds. След това щракнете върху Запиши като и изберете SVG и оставете настройките по подразбиране. Има малка оптимизация, която можем да направим тук, но наистина не си струва, тъй като по-късно ще използваме различни техники за подобряване, така че засега няма да губим време за тези настройки.

Трикове за намаляване на размера на файловете.

(Виж оптимизация)

За постигане най-малък размер SVG, би било логично да премахнете всичко ненужно от него. Най-известните и полезна програма(От понеМисля, че е така) за обработка на SVG е SVGO. Тя премахва всички необходим код. Но! Бъдете внимателни, когато използвате тази програма, ако планирате да манипулирате SVG с CSS/JS, тъй като може да изчисти твърде много кода, което ще затрудни бъдещите промени. Друго удобство на SVGO е, че може да бъде включен в процеса на автоматично изграждане на проект, но можете също да използвате GUIако искате.

Разбиране по-подробно с правилно отстраняваневсичко ненужно, можем да направим нещо друго в графичен редактор. Първо трябва да се уверите, че използвате възможно най-малко пътища/форми, както и точки по тези пътища. Можете да комбинирате и опростите всичко, което може да бъде опростено, и да премахнете всички ненужни точки. Illustrator разполага с плъгина VectorScribe Интелигентен инструментИнструмент за премахване на четка, който ще ви помогне да премахнете точки и пак да напуснете обща формасъщата.

Предварителна оптимизация

Smart Remove Brush Tool премахна точки

След това ще увеличим изображението. В Illustrator е удобно да включите View > Pixel Preview с пикселна мрежа и да проверите как са разположени контурите. Ще отнеме малко време, за да поставите контурите върху мрежата, но усилията ще се отплатят и ще доведат до по-чисто изобразяване (най-добре е да обърнете внимание на това предварително).

Точки извън мрежата

Подравнете към мрежата

Ако има два или повече обекта за подравняване, тогава си струва да премахнете всички ненужни припокривания. Понякога, дори ако контурите са внимателно подравнени, може да се види тънка бяла линия. За да предотвратите това, можете леко да припокривате обектите там, където се припокриват. Важно: в SVG z-индексът има определен ред, който зависи от обекта, разположен отдолу, така че си струва да поставите най-горния обект в долна частфайл в кода.

И накрая, не на последно място, нещо, което обикновено се забравя, е да активирате gzip компресия на SVG на вашия сайт във файла .htaccess.

AddType изображение/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... и т.н.

Като пример за това колко ефективна е тази техника, ще взема оригиналното лого на Breaking Borders и ще го оптимизирам по следния начин: увеличете размера до това, което трябва да бъде; Ще подредя контурите; Ще изтрия възможно най-много точки; преместете точките с цели пиксели; Ще преместя всички области на припокриване и ще ги изпратя на SVGO.

Оригинал: 1.413b

След оптимизация: 409b

В резултат на това размерът на файла стана ~71% по-малък (и ~83% по-малък при компресиране)

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

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

SVG атрибути и CSS свойства

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

В този пример рисуваме правоъгълник, който е запълнен с помощта на атрибута fill. Цвят и ширина външна рамка rectangle се определя от атрибутите stroke и stroke-width. Но можете също да стилизирате правоъгълника по този начин с помощта на CSS:

Просто използвахме атрибути като CSS свойства. Въпреки това, това не работи за всички атрибути. Не можете да зададете позицията и стойностите на ширината и височината по този начин. Ще използваме само атрибута y, както и ширината и височината.

Точно както в HTML, можем да работим с класове или идентификатори на всеки елемент. Така че бихме дефинирали представяне за набор от SVG елементи чрез стилизиран клас.

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

Използване на псевдо-класове

SVG позволява използването на псевдо-класове като:hover, дори във връзка със свойството CSS3 за преход.

След като имплементираме този пример, ще видим, че когато задържим курсора на мишката върху елемент със зададения за него примерен клас, цветът на запълване ще се промени от червено на синьо. За да работи правилно, не вграждайте SVG чрез img етикет. По-добре използвайте вграждане или iframe:

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

Когато използвате CSS3, не забравяйте да добавите префикси на доставчици, за да осигурите възможно най-голяма поддръжка. повече модерни браузъри. Докато Chrome и Firefox се справят с изобразяването безупречно, Internet Explorerотказва да покаже вашето творение, въпреки че е напълно в състояние да покаже тези CSS3 свойства, ако ги приложите към HTML.

Медийни заявки и SVG

Ако искате да персонализирате своя SVG, за да се адаптира към конкретни резолюции, просто използвайте медийни заявки направо в него:

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

SVG е векторен графичен формат. Името му буквално означава „мащабируем векторни графики"(Мащабираема векторна графика). Просто казано, това е това, с което работите в Adobe Illustrator. SVG може лесно да се използва в мрежата, но първо трябва да разберете много.

Защо изобщо се нуждаете от SVG?

Малък размер на файла, отлична компресия;
Мащабиране до произволен размер, без загуба на качество (с изключение на много малки размери);
Изглежда добре на ретината;
Широка гама от възможности, предоставена от филтри и интерактивност.

Нека създадем SVG изображение, с което ще работим след това

Създайте персонализиран чертеж в Adobe Illustrator. Ето например птица киви върху овал.

Моля, обърнете внимание, че изображението е рязко изрязано около краищата на изображението. Платното в SVG играе не по-малка роля, отколкото в PNG или JPG.

Adobe Illustrator може да записва като SVG.

При записване ще се появи друг диалогов прозорец с настройки. Честно казано, не знам много за тях. Има цял урок за SVG профили. Доста съм доволен от SVG 1.1.

Тук си струва да се отбележи, че имате възможност да щракнете върху OK и да запазите файла или да щракнете върху бутона „SVG Code...“, който ще отвори прозорец TextEdit (поне на Mac) със SVG кода.

И двата варианта могат да бъдат полезни.

В Illustrator работна зонабеше 612px ✕ 502px.

Това са размерите, които ще има изображението на страницата, ако не са изрично посочени. Размерите му могат да се променят чрез задаване на атрибутите за ширина или височина на img, точно като PNG или JPG. Ето един пример:

Поддръжка на браузър

Един вариант: проверете поддръжката чрез Modernizr и заменете src за изображението:

if (!Modernizr.svg) ( $(".logo img" ).attr("src" , "images/logo.png" ); )

Дейвид Бушел има много проста алтернатива, ако нямате нищо против JavaScript във вашето маркиране:

"this.onerror=null; this.src="image.png"">

За този метод на вмъкване на SVG можете да използвате следните техники за деградация:

И отново използваме Modernizr:

.logo-fallback ( дисплей : няма; /* Уверете се, че размерът съответства на размера на SVG */) .no-svg .logo-fallback ( фоново изображение : url (logo.png); )