Jak zmienić kolor w svg. Zewnętrzne pliki stylizacji dla SVG wstawiane za pomocą

CSS staje się z każdym dniem coraz potężniejszy i pojawia się wiele nowych funkcji, dzięki którym można tworzyć interfejsy użytkownika dużo łatwiej. I to jest świetne!

Jedną z takich funkcji CSS są filtry. Spróbujmy użyć filtrów do pracy Obrazy SVG mi.

Filtry CSS

Na początek przyjrzyjmy się filtrom. Obejmują one następujące funkcje:

• plama()
• jasność()
• kontrast()
• cień()
• skala szarości()
• odcień-obrót()
• odwracać()
• nieprzezroczystość()
• nasycić()
• sepia()

Filtry CSS to najprostszy sposób na wdrożenie podstawowych transformacji w sposób wydajny w przeglądarce.

Jeśli chcesz zobaczyć jak działa każdy filtr, polecamy odwiedzić stronę: cssfilters.co.

Edycja tła SVG

Uwielbiam używać formatu SVG (skalowalna grafika wektorowa) w Internecie. SVG to świetny format obrazu do wykorzystania w Internecie. Po dodaniu pliku SVG do strony masz dostęp do wszystkich jego elementów i właściwości. Umożliwia to dodawanie animacji, zmianę kolorów i dynamiczne dodawanie informacji. SVG doskonale nadaje się również do ikon.

SVG jest często używany jako obrazy tła. W w tym przypadku Tracisz kontrolę nad elementami obrazu. Nie można teraz zmieniać kolorów ani właściwości, ponieważ plik SVG staje się zwykłym obrazem. Ale z pomocą Filtry CSS możesz rozwiązać ten problem.

Regulacja jasności

Pierwszą rzeczą, na którą natrafiłem pracując z ikonami, była konieczność przyciemnienia białej ikony na jasnym tle. Aby uniknąć tworzenia nowej ciemnej ikony, użyłem filtr: jasność().

Wartość jasności większa niż 1 powoduje, że element jest jaśniejszy, mniejsza niż 1 powoduje, że element jest ciemniejszy.

Ikony z kolorem #000 Lub rbg(0, 0, 0) nie zostanie wyjaśnione. Muszą mieć inny kolor.

Regulacja koloru

Przyjrzeliśmy się, jak zmienić jasność ikony. Co jednak w sytuacji, gdy chcemy zmienić kolor ikony? W tym przypadku pomoże nam filtr sepia, odcień-obrót, jasność I nasycenie stworzyć dowolny kolor, jaki chcemy.

Z bieli możesz stworzyć na przykład niebieski, cyjan i różowy.

Colorize-różowy ( filtr: jasność(0,5) sepia(1) odcień-obrót(-70 stopni) nasycenie(5); .colorize-navy ( filtr: jasność(0,2) sepia(1) odcień-obrót(180 stopni) nasycenie(5 ); .colorize-blue (filtr: jasność(0,5) sepia(1) odcień-obrót(140 stopni) nasycenie(6); )

Zgodność

W chwili pisania tego tekstu filtry są obsługiwane przez następujące przeglądarki:

Zamiast wniosków

Nigdy nie zapominaj o swoich użytkownikach. Póki co filtry nie sprawdzają się wszędzie. Dlatego nie używaj białych ikon filtrów na białym tle, ponieważ niektórzy użytkownicy po prostu nic nie zobaczą. Nie zapomnij także o alternatywnym tekście obrazów.

Oryginalny artykuł: link Autor artykułu: Alex. Kategoria:
Data publikacji: 01.04.2018

SVG to format grafiki wektorowej. Jego nazwa dosłownie oznacza „skalowalny”. Grafika wektorowa"(Skalowalna Grafika wektorowa). Krótko mówiąc, właśnie w tym pracujesz Adobe Illustratorze. SVG można łatwo używać w Internecie, ale najpierw trzeba wiele zrozumieć.

Dlaczego w ogóle potrzebujesz SVG?

• Małe rozmiary plików, doskonała kompresja;
• Skalowanie do dowolnego rozmiaru, bez utraty jakości (z wyjątkiem bardzo małych rozmiarów);
• Dobrze wygląda na siatkówce;
• Szeroki wachlarz możliwości, jakie dają filtry i interaktywność.

Stwórzmy obraz SVG, z którym będziemy dalej pracować

Utwórz niestandardowy rysunek w programie Adobe Illustrator. Tutaj na przykład ptak kiwi na owalu.

Należy pamiętać, że obraz jest ostro przycięty na krawędziach obrazu. Płótno w SVG odgrywa nie mniejszą rolę niż w PNG czy JPG.

Adobe Illustrator może zapisywać jako SVG.

Podczas zapisywania pojawi się kolejne okno dialogowe z ustawieniami. Szczerze mówiąc, nie wiem o nich zbyt wiele. Istnieje cały samouczek dotyczący profili SVG. Jestem całkiem zadowolony z SVG 1.1.

Warto w tym miejscu zaznaczyć, że masz możliwość kliknięcia OK i zapisania pliku lub kliknięcia przycisku „Kod SVG...”, który otworzy okno TextEdit (przez co najmniej na komputerze Mac) z kodem SVG.

Obie opcje mogą być przydatne.

W Illustratorze Obszar roboczy wynosił 612 pikseli ✕ 502 pikseli.

Są to wymiary, jakie będzie miał obraz na stronie, jeśli nie zostaną one szczegółowo określone. Jego wymiary można zmienić, ustawiając atrybuty szerokości lub wysokości na img , podobnie jak PNG lub JPG. Oto przykład:

Obsługa przeglądarki

Jedna opcja: sprawdź wsparcie przez Modernizr i zamień src dla obrazu:

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

David Bushell ma bardzo prostą alternatywę, jeśli nie masz nic przeciwko JavaScriptowi w swoich znacznikach:

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

W przypadku tej metody wstawiania SVG można zastosować następujące techniki degradacji:

<svg > ... svg > <div class="fallback" >div >

I znowu używamy Modernizr:

.logo-fallback (wyświetlanie: brak; /* Upewnij się, że rozmiar odpowiada rozmiarowi SVG */) .no-svg .logo-fallback ( obraz tła : url (logo.png); )

Dodanie SVG do strony za pomocą tagu