Implementacja gradientu SVG

Czy możliwe jest odtworzenie tego rodzaju rozmytego gradientu w pliku SVG?

svg gradient Jared Garcia
źródło

Odpowiedzi:

Tak i nie.

Możliwe jest utworzenie siatki gradientu w Inkscape i zapisanie jej jako SVG. Jednak standardy SVG stosowane w przeglądarkach nie obsługują jeszcze siatek gradientu. To może się zmienić w przyszłości, ale obecnie nie.

Inną metodą, która działa w przeglądarkach, jest dodanie kilku stałych obiektów, rozmycie ich i umieszczenie ich w masce przycinającej. To wciąż rozwiązanie czysto wektorowe, nie rasteryzowane.

Oto SVG dla wersji, która działa w przeglądarkach, jeśli chcesz.

Edycja : powyższy link do SVG nie jest już dostępny, więc go usunąłem.

Billy Kerr
źródło

To super! Plik SVG w łączu nie przypomina wstawki zawartej w odpowiedzi, jednak ... wygląda na znacznie jaśniejszy. Jest jakiś powód tego?

Jared Garcia

@JaredGarcia Nie mam pojęcia dlaczego - moje zrzuty ekranu pasują do SVG dokładnie na moim komputerze w Inkscape - ale upewnij się, że używasz najnowszej wersji Inkscape - teraz w wersji 0.92

Billy Kerr

Ach, oglądałem go w przeglądarce na telefonie komórkowym prosto z tego linku do pobrania. Otworzę to w Inkscape i sprawdzę.

Jared Garcia

@JaredGarcia opublikował to jako nowe pytanie, aby można było na nie odpowiedzieć poprawnie.

Andrew T.

Rozmycie w przeglądarkach jest naprawdę drogie. Możesz uzyskać ten sam efekt, nakładając gradienty tła. Są nawet animowane. I możesz użyć trybu mieszania tła, aby uzyskać dodatkowy efekt w nowoczesnych przeglądarkach.

PieBie

Można go wykonać w programie Illustrator i Inkscape jako siatkę gradientu. Po zapisaniu jako SVG w starszym programie Illustrator przekształcił się w obraz bitmapowy. Oczywiście Illustator wiedział o tym około 6 lat temu, ale język SVG nie.

Zapisany w Inkscape jako zwykły SVG, a nie jako Inkscape SVG, pozostał jako siatka gradientowa, a otwarcie pliku SVG za pomocą edytora tekstów ujawniło, że istnieje polecenie meshgradient. Zobacz fragment kodu

Tak więc, nie znając standardów, mogę powiedzieć: „Jest przynajmniej zaimplementowany w zwykłym SVG Inkscape”.

Mam nadzieję, że ktoś programista rozpoznający status rozwoju SVG powie coś dokładnie.

użytkownik 287001
źródło

Tutaj możesz bezpośrednio dołączyć kod z odpowiednim formatowaniem kodu. Nie musisz publikować zrzutu ekranu.

Wrzlprmft

Niestety siatki gradientu Inkscape nie są jeszcze obsługiwane w Google Chrome ani Firefox.

Billy Kerr

Czy możesz opublikować kod SVG

Jared Garcia

@JaredGarcia Nie mam tego. Wypełniłem tylko 10 węzłów po 25, aby zobaczyć, że daje to odpowiedni wygląd. Możesz zrobić to sam. Zaimportuj obraz do Inkscape, utwórz kwadrat o tym samym rozmiarze, ustaw typ wypełnienia = siatka gradientu, dodaj kolejne 3 wiersze i kolumny za pomocą narzędzia siatki, za pomocą narzędzia węzła wybierz kolejno węzły, a selektorem kolorów weź kolor z importowanego obrazu. Zapisz jako zwykły plik SVG, otwórz w Notatniku Win, aby zobaczyć kod.

user287001,

Jeśli Twoim celem jest uzyskanie lekkiego, skalowalnego gradientu siatki, możesz wypróbować tę metodę:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

To nie jest wektor, ale równie dobrze może być, ponieważ rozmiar pliku jest bardzo mały, a obraz skaluje się w nieskończoność.

peterhry
źródło

Witamy w GDSE - glaf, aby Cię tu mieć! Rozejrzyj się po okolicy i dowiedz się, jak lubimy pytać, jak zadawać pytania i odpowiadać, jak odpowiadać na pytania. Prawdopodobnie dobrym pomysłem jest spojrzenie również na ogólne kody zachowań, gdy rozglądasz się po centrum pomocy. Twoja odpowiedź jest dobrą odpowiedzią na temat udostępnionego przez Ciebie zastosowania, ale tutaj w GDSE wolimy używać linków wyłącznie w celach informacyjnych lub w celu powiązania zasobów, ponieważ linki zmieniają się lub znikają zbyt łatwo: czy mógłbyś streścić treść, z którą łączysz się w ciele, proszę?

GerardFalla