Praktyczny przewodnik po SVG i narzędzia do projektowania

Dobre zrozumienie SVG to rzadka umiejętność. Zaskakująco często SVG jest traktowane jako kolejny format obrazu. Używamy SVG ze względu na jego skalowalność i mniejszy rozmiar pliku, ale w rzeczywistości SVG to o wiele więcej!

W tym artykule rzucę światło na trzy najpopularniejsze narzędzia do projektowania: Adobe Illustrator, Sketch i Figma. Dostępne są również inne narzędzia wspierające SVG, które mogą mieć inne funkcjonalności i implementować inne rozwiązania.

Uwaga : jeśli nie zaznaczono inaczej, treść tego artykułu odnosi się do SVG 1.1, wydanie drugie. Niektóre z omówionych poniżej punktów nie mają zastosowania do SVG 2, jednak nadal nie osiągnął on statusu rekomendacji, pozostawiając SVG 1.1 jako najbardziej aktualną specyfikację.

Po co zawracać sobie głowę narzędziami do projektowania?

SVG to język znaczników oparty na XML i, jak każdy inny język programowania, można go pisać i edytować w edytorze tekstu. Tak więc teoretycznie, w przeciwieństwie do plików JPG lub PNG, nie potrzebujemy żadnego oprogramowania GUI do tworzenia SVG. Jednak w zdecydowanej większości przypadków korzystanie z aplikacji do projektowania graficznego jest nieuniknione.

Praca ze skomplikowanymi kształtami i grafiką w formacie tekstowym jest całkowicie możliwa, ale zwykle byłaby bardzo trudna i żmudna. Dlatego powszechną praktyką jest używanie aplikacji takich jak Adobe Illustrator, Sketch czy Figma do wizualnego projektowania grafiki, a następnie eksportowanie ich do formatu SVG.

Więc bez względu na to, czy jesteś projektantem kodującym, czy programistą świadomym projektowania, dobra biegłość w pracy z SVG wymaga odrobiny wiedzy z obu stron: narzędzi projektowych i samego języka SVG. Aby lepiej zrozumieć związek między nimi, przyjrzyjmy się bliżej, co oferują aplikacje do projektowania graficznego i jak ich funkcje przekładają się na SVG.

Podstawowe kształty

Wiele grafik wektorowych składa się z kilku podstawowych kształtów — pogrupowanych, przekształconych i połączonych ze sobą. Poniższa tabela przedstawia, jakie narzędzia kształtów są dostępne w programach Illustrator, Sketch i Figma oraz jakie elementy SVG są eksportowane.

Elipsy i okręgi

Jednym z podstawowych kształtów w każdym narzędziu do projektowania jest elipsa. W SVG znajdziemy pasujący element <ellipse /> , zdefiniowany przez współrzędne środka elipsy ( cx i cy ) oraz dwa promienie ( rx i ry ).

Tak wygląda elipsa w SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

Bardzo szczególnym rodzajem elipsy jest koło. Okrąg jest elipsą o równych promieniach rx i ry . SVG ma swój własny element <circle /> , który przyjmuje jeden atrybut mniej, ponieważ jest tylko jeden promień, który należy wziąć pod uwagę:

 <circle cx="400" cy="300" r="250"/>

W przypadku elips i okręgów wszystkie narzędzia do projektowania działają tak samo: narzędzie Elipsa w programie Illustrator, narzędzie Owal w szkicu i narzędzie Elipsa w Figma, wszystkie wygenerują element <ellipse /> , chyba że promienie są równe: w takich przypadkach otrzymamy element <circle /> .

Prostokąty i zaokrąglone prostokąty

Innym podstawowym kształtem wspólnym dla wszystkich narzędzi do projektowania jest prostokąt. W przypadku wszystkich narzędzi do projektowania, użycie narzędzia prostokąta generuje element <rect /> w SVG. Podstawowy <rect /> jest zdefiniowany przez 4 atrybuty: jego współrzędne x i y , wraz z jego szerokością i wysokością:

 <rect x="150" y="100" width="500" height="400"/>

Zauważ, że podczas gdy pozycje <ellipse /> i <circle /> są określone przez ich geometryczne środki, położenie <rect /> jest określone przez współrzędne jego lewego górnego rogu.

Oprócz podstawowych prostokątów często używamy prostokątów z zaokrąglonymi rogami. We wszystkich trzech narzędziach do projektowania można zmienić prostokąt w prostokąt zaokrąglony, stosując do niego promień obramowania w panelu Inspektor lub w panelu Właściwości .

Dodatkowo w Sketch i Illustrator znajdują się narzędzia dedykowane do tworzenia zaokrąglonych prostokątów ( Rounded Rectangle Tool w Illustratorze oraz Rounded tool w Sketch). Jednak nie ma różnicy między zwykłym prostokątem z zastosowanym promieniem a prostokątem zaokrąglonym narysowanym za pomocą narzędzia Prostokąt zaokrąglony .

Dlatego bez względu na sposób utworzenia zaokrąglony prostokąt zostanie wyeksportowany przy użyciu następującej składni:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

W tym przypadku rx jest atrybutem odpowiedzialnym za promień zaokrąglonych rogów:

Zaokrąglone prostokąty z eliptycznymi narożnikami

Jedną z istotnych różnic między narzędziami do projektowania a SVG jest sposób definiowania promieni. We wszystkich rozważanych przez nas narzędziach do projektowania promień granicy jest definiowany przez jedną zmienną. Możemy myśleć o promieniach granicznych jako o małych okręgach służących do maskowania narożników naszych prostokątów:

Tymczasem w SVG promienie brzegowe mogą być zdefiniowane przez dwa atrybuty: rx (jak w powyższym przykładzie) i ry . Pozwalają nam tworzyć prostokąty o eliptycznych narożnikach. Możesz wyobrazić sobie takie zaokrąglone rogi jako elipsy używane jako maski zamiast okręgów:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

Tak więc w tym przypadku SVG oferuje więcej możliwości niż narzędzia do projektowania.

Uwaga : chociaż nie jest to dokładnie związane z tematem tego artykułu, warto zauważyć, że opisana powyżej różnica dotyczy zarówno SVG, jak i HTML/CSS. Właściwość CSS border-radius , która jest używana do stylizowania węzłów, takich jak div i spans, umożliwia również tworzenie eliptycznych narożników. Przykład można zobaczyć poniżej.

 border-radius: 10px 5% / 20px 25em 30px 35em;

Wartości przed ukośnikiem ( / ) są promieniami poziomymi (odpowiednik rx ), a wartości po ukośniku są wartościami pionowymi (odpowiednik ry ).

Zaokrąglone prostokąty o wielu promieniach

W narzędziach do projektowania, tak samo jak w CSS, każdy z rogów prostokąta może być kontrolowany oddzielnie. Innymi słowy, każdy narożnik może mieć swój własny promień (lub w ogóle nie mieć promienia). Taka operacja nie jest możliwa na elemencie <rect /> w SVG. Każdy element <rect /> ma tylko jeden atrybut rx i jeden ry . Jeśli utworzysz prostokąt z wieloma promieniami zastosowanymi do jego rogów, narzędzie do projektowania wygeneruje element <path /> zamiast elementu <rect /> . O elemencie <path /> powiemy więcej w następnej sekcji.

Gładkie rogi

Jedną z ciekawostek wprowadzonych niedawno przez Sketch i Figma są gładkie rogi. Krótko mówiąc, gładkie rogi wykorzystują nieregularny promień obramowania, aby uzyskać efekt, który wygląda bardziej naturalnie i, cóż, gładko. Najczęstszym zastosowaniem gładkich rogów są ikony aplikacji i inne zaokrąglone elementy na iOS. Apple używało „zwykłych” zaokrąglonych rogów na swojej platformie mobilnej do iOS6, a następnie przerzuciło się na to, co dziś nazywamy „gładkimi” rogami w ramach dużego przeprojektowania wprowadzonego w 2013 roku (iOS7).

W programie Sketch można uzyskać efekt wygładzonych narożników, przełączając między opcjami Round Corners i Smooth Corners w aplikacji Inspector . Figma zapewnia jeszcze większą kontrolę nad narożnikami, ponieważ możesz manipulować poziomem gładkości w menu Wygładzanie narożników .

Niestety, żadnego z nich nie można łatwo przetłumaczyć na SVG, ponieważ SVG w ogóle nie zna koncepcji gładkich narożników. Istnieje również ważna różnica między tym, co robią Sketch i Figma, jeśli spróbujesz wyeksportować prostokąt z gładkimi narożnikami do SVG.

Figma ignoruje gładkie rogi i eksportuje prostokąt jako zwykły element <rect /> z zaokrąglonymi rogami. Z drugiej strony Sketch eksportuje prostokąt z gładkimi narożnikami jako <path /> , która próbuje odtworzyć prawdziwy kształt gładkich narożników. Tak więc Figma daje nam gorszą dokładność ze względu na zachowanie prostokąta jako prostokąta, podczas gdy Sketch dąży do maksymalnej możliwej dokładności kosztem semantyki i większego rozmiaru pliku. Jeśli chcesz lepiej zrozumieć, co oznacza ta różnica, nieco później zagłębimy się w zalety i wady zachowania podstawowych kształtów.

Linie

Kolejnym podstawowym typem elementu jest linia. W tym przypadku linię nazywamy pojedynczą linią prostą biegnącą od punktu A do punktu B. Wszystkie programy Illustrator, Sketch i Figma oferują własne narzędzia do rysowania linii. W SVG mamy element <line /> . Wymagane są cztery jego atrybuty: współrzędne punktu początkowego i współrzędne punktu końcowego:

 <line x1="100" y1="100" x2="200" y2="200"/>

Jeśli chodzi o eksportowanie, Illustrator i Figma będą eksportować linie jako elementy <line /> tam, gdzie to możliwe, podczas gdy Sketch zawsze oblicza linie do elementów <path /> .

Polilinie

Przyjrzyjmy się teraz poliliniom. Polilinia to połączona seria prostych linii. Polilinie nie mają dedykowanych narzędzi w narzędziach projektowych. Można je narysować za pomocą narzędzia Pióro (w programach Illustrator i Figma) lub za pomocą narzędzia Wektor (w programie Sketch).

W SVG polilinie są definiowane za pomocą elementu <polyline /> . <polyline /> jest rysowana za pomocą atrybutu points , który jest listą współrzędnych definiujących wszystkie punkty tworzące polilinię. Przyjrzyjmy się przykładowi polilinii złożonej z trzech segmentów i czterech punktów:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator i Sketch tłumaczą polilinie na elementy <polyline/> , podczas gdy Figma eksportuje polilinie jako <path /> s.

Strzałki

We wszystkich trzech narzędziach możesz kontrolować końce linii, aby zamienić je w strzałki i tym podobne. A wszystkie trzy narzędzia wyeksportują takie linie jak <path /> s, nawet jeśli bez zastosowanych wersalików te same kształty zostałyby przetłumaczone na <line /> s lub <polyline /> s. Czy to dlatego, że SVG nie obsługuje strzałek? Nie dokładnie.

W rzeczywistości specyfikacja SVG obejmuje konfigurowalne końce linii, które są znane jako znaczniki. Jednak żadne z wymienionych przez nas narzędzi projektowych nie używa znaczników w generowanym przez nie SVG.

<marker> to oddzielny element SVG, który można zdefiniować w <defs> SVG, a następnie użyć w elementach <line> , <polyline> i <path> z atrybutami markera: marker , marker-start , marker-mid i marker-end . Jeśli chcesz dowiedzieć się więcej o tych atrybutach, polecam zapoznać się z oficjalną dokumentacją W3C.

Wielokąty i gwiazdy

Ostatnim podstawowym kształtem, któremu się przyjrzymy, jest wielokąt. Wielokąt to zamknięty kształt złożony z linii prostych, np. gwiazdy lub sześciokąta. Możesz też myśleć o tym jak o zamkniętej polilinii. Składnia elementu <polygon /> w SVG jest w rzeczywistości taka sama jak w przypadku <polyline /> . Jedyna różnica między nimi polega na tym, że w <polygon /> ostatni punkt na liście jest zawsze połączony z pierwszym punktem, aby uczynić <polygon /> kształtem zamkniętym.

Niektóre wielokąty są wielokątami foremnymi. Szczególną cechą wielokątów foremnych jest to, że wszystkie ich boki i kąty są równe. Aby narysować regularne wielokąty, takie jak sześciokąt lub pięciokąt, możesz użyć narzędzia Wielokąt , tego samego w programach Illustrator, Sketch i Figma. Narzędzia wielokątów w programach Illustrator i Sketch wygenerują elementy <polygon /> w SVG. Z drugiej strony w Figma wszystkie kształty wykonane za pomocą narzędzia Polygon dają w wyniku elementy <path /> .

Wszystkie trzy narzędzia do projektowania mają również dedykowane narzędzia Gwiazda do rysowania gwiazd. Jednak jeśli chodzi o eksport, kształty utworzone za pomocą narzędzi Gwiazda zachowują się dokładnie tak samo, jak te utworzone za pomocą narzędzi Wielokąt . W SVG gwiazdy są tylko wielokątami, NIE ma elementu ~~<star />~~ .

Należy pamiętać, że narzędzia Gwiazda i Wielokąt są używane do tworzenia regularnych gwiazd i wielokątów, podczas gdy element <polygon /> w SVG może być użyty do dowolnego wielokąta, regularnego lub nieregularnego.

Wszystkie drogi prowadzą do <path />

Jak już się dowiedzieliśmy, w SVG istnieją trzy podstawowe kształty przeznaczone do rysowania kształtów utworzonych z linii prostych: <line /> , <polyline /> i <polygon /> . Ale co, jeśli chcielibyśmy, aby nasze linie były zakrzywione? Najwyższy czas porozmawiać o elemencie <path /> .

Element <path />

<path /> to najbardziej wszechstronny element SVG. Można go użyć do narysowania dowolnej linii i kształtu, w tym między innymi wszystkich podstawowych kształtów wymienionych powyżej. W rzeczywistości każdy podstawowy kształt ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) można opisać jako element <path /> . Co więcej, istnieje wiele kształtów, które można utworzyć za pomocą <path /> , ale nie można ich utworzyć za pomocą żadnego innego elementu SVG. Aby dowiedzieć się więcej o <path /> i jego składni, polecam zapoznać się z tym znakomitym artykułem autorstwa Chrisa Coyiera.

Jak teraz tworzymy elementy <path /> w narzędziach projektowych? Przede wszystkim, jak dowiedzieliśmy się powyżej, niektóre warstwy utworzone za pomocą narzędzi kształtów obliczają elementy <path /> , mimo że teoretycznie mogą to być inne elementy (np. Figma eksportuje wszystkie wielokąty jako <path /> s, mimo że mogłyby być zdefiniowany jako <polygon /> s. Następnie każdy inny nieregularny kształt, który narysujemy za pomocą narzędzia Pióro lub narzędzia Wektor , musi zostać wyeksportowany jako <path /> , ponieważ nie ma innego elementu SVG, który mógłby je zdefiniować. Wreszcie, w Sketch i Figma, możemy przekonwertować dowolny podstawowy kształt na warstwę, która oblicza <path /> .W Sketch możemy to osiągnąć, wybierając Layer > Combine > Flatten , podczas gdy w Figma możemy znaleźć tę funkcję w Object > Flatten Selection ( ⌘ + E w systemie macOS, Ctrl + E w systemie Windows).

Operacje logiczne

Operacje logiczne to funkcje wykonywane na kształtach w celu połączenia ich na kilka różnych sposobów. W programach Illustrator, Sketch i Figma dostępne są 4 standardowe operacje logiczne:

• Unia (Zjednoczyć)
  Suma kształtów
• Odejmij (minus z przodu)
  Kształt dolny odjęty przez wspólny obszar między kształtami
• Przecinać
  Wspólny obszar między kształtami
• Różnica (wykluczenie)
  Suma kształtów odjęta przez wspólny obszar między kształtami.

W programie Illustrator wszystkie te funkcje generują jeden kształt (kontur). Jest to czynność, której nie można cofnąć — inaczej niż przy użyciu funkcji Cofnij ( ⌘ + Z w systemie MacOS, Ctrl + Z w systemie Windows). Z kolei w Sketch i Figma operacje logiczne tworzą grupy warstw, które można później rozgrupować bez szkody dla kształtów wewnątrz. Możesz jednak scalić te grupy w jeden kształt, aby uzyskać podobny efekt jak w programie Illustrator, korzystając z funkcji Spłaszcz , o których mowa w poprzednim akapicie.

Pytanie brzmi, czy SVG obsługuje operacje logiczne? Nie, nie ma. Po prostu się łączą. Dlatego każdy połączony kształt, który utworzysz za pomocą operacji logicznych w Figma lub Sketch, zostanie wyeksportowany jako pojedynczy element <path /> .

Wygląda tak samo, więc dlaczego ma to znaczenie?

Jeśli chodzi o definiowanie różnych kształtów w SVG, jego składnia jest niezwykle wszechstronna. Rozważmy podstawowy prostokąt:

Taki kształt można zdefiniować w SVG na kilka różnych sposobów. Może to być element <rect /> , element <polygon /> . Zdecydowanie może to być element <path /> (ponieważ wszystko może być elementem <path /> ). Może to być również element <line /> (lub element <polyline /> ), jeśli zdecydujemy się tworzyć go za pomocą obrysów zamiast wypełnień.

Każdy z tych elementów renderuje prostokąt, który wygląda dokładnie tak samo:

Ale jeśli efekt końcowy (grafika renderowana przez agenta użytkownika w przeglądarce) wygląda tak samo, czy to naprawdę ma znaczenie, jakie podejście wybierzemy? Cóż, tak. Zasadniczo zawsze zalecam stosowanie podstawowych kształtów, gdy to możliwe.

Na koniec użyj najbardziej oczywistych kształtów dla danego przypadku. Na przykład nie twórz prostokątów z liniami lub okręgów z prostokątami, jeśli nie masz dobrego powodu. Przemawia za tym co najmniej kilka argumentów:

1. Semantyka/czytelność
   Narzędzia kompresji, takie jak SVO, dają możliwość obliczenia wszystkich podstawowych kształtów do elementów ścieżki. Może zaoszczędzić ci kilka bitów, ale zdecydowanie obniży czytelność twojego kodu. Składnia <path /> jest wyjątkowo nieintuicyjna, więc jeśli twój SVG ma być kiedykolwiek modyfikowany w edytorze kodu, a nie w narzędziu do projektowania, o wiele łatwiej będzie to zrozumieć, jeśli zachowasz podstawowe kształty jako podstawowe kształty.
2. Rozmiar pliku
   Kompresowanie kształtów do ścieżek może pomóc w zminimalizowaniu plików, ale nie zawsze tak jest! Na przykład zaokrąglony prostokąt zajmuje znacznie więcej miejsca jako <path /> niż jako <rect /> .
3. Animacje
   Czy kiedykolwiek próbowałeś animować SVG? To świetna zabawa — o ile operujesz na czystym, semantycznym SVG. Dzięki podstawowym kształtom możesz łatwo manipulować takimi parametrami jak promień, szerokość, wysokość czy położenie punktu. Jeśli połączysz swoje kształty w ścieżki, większość z tych operacji będzie znacznie trudniejsza do osiągnięcia lub po prostu niemożliwa.
4. Warianty/Reakcja
   Pamiętaj, że SVG nie jest statycznym obrazem, takim jak JPG. Możesz go stylizować, tworzyć motywy, sprawić, by był responsywny i tak dalej. Tak samo jak w przypadku animacji, zachowanie odpowiedniej struktury i semantyki pliku z pewnością pomoże Ci w każdym z tych zadań.

Jak w przypadku każdej reguły, można znaleźć pewne wyjątki. Ale ogólnie rzecz biorąc, dobrą praktyką jest utrzymywanie SVG w jak najbardziej czytelnym, elastycznym i ustrukturyzowanym formacie.

Przyjrzyjmy się teraz innym atrybutom i funkcjom, takim jak viewBox, grupy, przekształcenia i efekty wizualne.

width , height i viewBox

Jeśli masz już jakieś doświadczenie z SVG, prawdopodobnie zauważyłeś, że otwierający tag <svg> często ma następujące atrybuty: width , height i viewBox . W narzędziach projektowych mamy do czynienia z wymiarami obszarów roboczych (lub ramek w przypadku Figmy). Jak więc dokładnie te wartości są ze sobą powiązane?

Zacznijmy od wyjaśnienia atrybutów <svg> , o których właśnie wspomnieliśmy. Możesz myśleć o viewBox jak o wirtualnym płótnie w formie układu współrzędnych. Środek tego układu współrzędnych znajduje się w lewym górnym rogu wyznaczonego obszaru. Wszystkie elementy w <svg viewBox="…"> są umieszczane zgodnie z tym układem współrzędnych, a także są przez niego przycinane — wszystko, co przekracza viewBox , nie zostanie wyrenderowane. viewBox przyjmuje jako wartość 4 liczby:

 <svg viewBox="0 0 12 8"> … </svg>

Ponieważ SVG oznacza Scalable Vector Graphics, w przypadku tych liczb nie są potrzebne żadne jednostki. Wyobraź sobie to jako abstrakcyjny układ współrzędnych, który można skalować w górę iw dół do dowolnego rozmiaru. Nie przejmuj się zbytnio dwoma pierwszymi liczbami, najprawdopodobniej nie będziesz ich potrzebować. Te dwa ostatnie są tym, co zwykle ma znaczenie. To są rzeczywiste wymiary naszego płótna SVG.

viewBox nie określa rozmiaru SVG. Określa on po prostu współrzędne obszaru, w którym rysowany jest nasz SVG. Dlatego, gdy jest używany w Internecie, <svg> z określonym viewBox zawsze zajmie całą dostępną przestrzeń i zachowa współczynnik ustawiony przez viewBox — chyba że zabronimy tego za pomocą CSS lub ustawimy atrybuty width i/lub height .

width i height to atrybuty <svg> , które ustawiają rzeczywistą szerokość i wysokość elementu SVG. W przeciwieństwie do viewBox , powinny używać określonych jednostek, takich jak piksele, emy czy remy. Oznacza to, że możemy za ich pomocą również przekształcić SVG — jeśli stosunek między width a height jest inny niż stosunek między wartościami viewBox , SVG przekrzywi grafikę określoną w viewBox zgodnie z wartościami width i height :

Co się dzieje, gdy eksportujemy SVG z narzędzi projektowych? W Sketch i Figma wszystkie zasoby (bez względu na to, czy są to pojedyncze warstwy, grupy czy obszary robocze) zawsze otrzymają viewBox równy wymiarom eksportowanego elementu oraz width i height ustawionej w pikselach, równej dwóm ostatnim wartościom viewBox . W programie Illustrator wszystkie zasoby mają viewBox , określony w taki sam sposób jak w Sketch i Figma, ale bez zastosowania width i height .

Grupy

Grupy są podstawowym sposobem organizowania warstw w narzędziach projektowych. Oprócz ustawiania hierarchii grupy służą do stosowania operacji zbiorczych, takich jak przekształcenia, na wielu elementach. Nie ma znaczącej różnicy w sposobie działania grup w programach Illustrator, Sketch i Figma i na szczęście podstawowa funkcjonalność grup SVG ( <g>…</g> ) jest prawie taka sama.

Przekształcenia

W SVG istnieje pięć podstawowych przekształceń, które możemy zastosować do elementu:

1. translate : przesuwa element wzdłuż osi pionowej i/lub poziomej;
2. scale : skaluje element wzdłuż osi pionowej i/lub poziomej:
3. rotate : tworzy dwuwymiarowy obrót o zadany kąt określony w stopniach wokół danego punktu;
4. skew ( skewX lub skewY ): pochyla element o zadany kąt określony w stopniach wzdłuż osi pionowej lub poziomej;
5. matrix : najbardziej złożona i wszechstronna z dostępnych funkcji przekształcania. Ponieważ wymagałoby to sporo algebry, aby wyjaśnić, jak działają transformacje macierzowe, wykracza to daleko poza zakres tego artykułu. Przyznajmy tylko, że matrix pozwala na wykonanie wielu skomplikowanych przekształceń, takich jak rozciąganie, ściskanie, ścinanie i tak dalej.

Uwaga : Zauważ, że chociaż niektóre przekształcenia SVG wyglądają bardzo podobnie do przekształceń CSS, nie są takie same. Na przykład CSS oferuje funkcje obracania 2D i 3D, podczas gdy SVG ma tylko jedną funkcję obracania 2D. Ponadto, podczas gdy CSS akceptuje różne jednostki kąta, takie jak stopnie lub radiany, obroty SVG są zawsze ustawiane w stopniach, dlatego jednostkę można pominąć (np . rotate(45) , NIE ~~rotate(45deg)~~ ).

Wszystkie te przekształcenia można zastosować do dowolnego elementu SVG, takiego jak kształty lub grupy, i nie mają one wpływu na oryginalną geometrię elementu. Przekształcenia stosujemy za pomocą atrybutu transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Przyjrzyjmy się teraz narzędziom do projektowania! Tak więc większość transformacji, które stosujemy w narzędziach do projektowania, oddziałuje bezpośrednio na geometrię obiektów i ich położenie na płótnie. Nie są one niezależne od kształtów i nie będą eksportowane jako funkcje transformacji SVG.

Wyjątkiem są rotacje, których wartości są przechowywane w Inspektorze oddzielnie od geometrii elementu i są eksportowane jako funkcja transform="rotate(…)" .

Co ciekawe, ta sama zasada dotyczy przewrotów (odbić) w Sketch i Figma (nie w Illustratorze!). Każdy z nich ma jednak swoje podejście. Sketch wykorzystuje kombinację ujemnego skalowania i translacji, aby uzyskać efekt odwracania, podczas gdy Figma wykonuje odwracanie w ramach pojedynczej funkcji macierzy.

Promień graniczny

Mówiliśmy już o zaokrąglonych prostokątach, ale co z zaokrągleniem innych kształtów? W rzeczywistości we wszystkich omawianych przez nas narzędziach do projektowania można zaokrąglać rogi o dowolnym kształcie, nie tylko prostokąta.

Ale co z SVG? Czy elementy <polygon /> i <path /> również mają atrybuty rx i ry ? Niestety nie. Każdy kształt inny niż prostokąt, po zaokrągleniu któregokolwiek z jego rogów, zawsze będzie eksportowany jako element <path /> traktujący zaokrąglone rogi jako integralną część geometrii kształtu.

Wypełnienia i obrysy

Illustrator, Sketch i Figma obsługują wypełnienia i obrysy jako podstawowe właściwości dowolnych kształtów, i tak się dzieje w SVG. Dlatego wypełnienia określone w narzędziach do projektowania są eksportowane w atrybucie fill , a stokes są eksportowane w atrybucie stroke . Nie myśl jednak, że to takie proste. Diabeł tkwi w szczegółach.

Wypełnienie kolorem

Wypełnienie kolorem jest najbardziej podstawowym z dostępnych wypełnień i jest określone za pomocą jednego zwykłego koloru (np. #3fd8e2 ). W SVG ta wartość jest umieszczana bezpośrednio w atrybucie fill (np. fill="#3fd8e2" ).

Narzędzia projektowe eksportują wypełnienia kolorami z wartościami szesnastkowymi (np #0000ff ), chociaż w SVG można również używać wszystkich innych schematów nazewnictwa znanych CSS, takich jak nazwy kolorów (np. blue ), wartości RGB (np rgb(0,0,255) ) lub nawet wartości HSL (np. hsl(240,100%,50%) ).

Wypełnij krycie

Jeśli chodzi o krycie wypełnienia, SVG akceptuje półprzezroczyste kolory (np. wartości RGBA), chociaż udostępnia również atrybut fill-opacity . Ze względu na problemy ze zgodnością zalecanym podejściem jest użycie fill-opacity , które jest również stosowane przez Figma i Sketch. (Nie wspominam tutaj o programie Illustrator, ponieważ program Illustrator nie pozwala na kontrolowanie krycia wypełnienia). Jeśli więc chcesz utworzyć kwadrat SVG wypełniony półprzezroczystym kolorem czerwonym, możesz wykonać następujące czynności:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

ale bardziej zalecanym podejściem (stosowanym przez Sketch i Figma) byłoby:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Wypełnienie gradientowe

Jeśli znasz CSS, być może wiesz, że jeśli chodzi o tła, przełączanie między kolorowym i gradientowym tłem jest stosunkowo proste. W obu przypadkach można użyć tej samej właściwości background-color (lub background ). Ponieważ gradienty w SVG są znacznie starsze niż gradienty CSS, ich składnia jest również zupełnie inna.

Aby użyć gradientu w SVG, musisz najpierw zdefiniować go w <defs>…</defs> , a następnie odwołać się do niego w atrybucie fill , np.:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Tak więc to, co dzieje się podczas eksportu SVG, gdy używasz wypełnienia gradientowego, polega na tym, że do <defs> dodawany jest gradient, do którego odwołuje się poniższy kod.

Ważną rzeczą do zapamiętania jest to, że SVG obsługuje tylko gradienty liniowe i radialne. Efekty takie jak gradient kątowy lub siatka gradientu nie będą eksportowane do SVG.

Wypełnienie wzorkiem/obrazem

Sketch i Figma oferują również wypełnienie obrazem, w którym grafika rastrowa jest używana do wypełnienia całego elementu lub jako powtarzający się wzór.

Jeśli chodzi o eksportowanie wypełnień obrazem do SVG, jest to w rzeczywistości bardzo podobne do gradientów. Obrazy są definiowane w <defs> za pomocą elementu <pattern>…</pattern> , a następnie przywoływane w atrybucie fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Aby to zadziałało, należy gdzieś zdefiniować obraz #picture , do którego się odwołuje . Narzędzia projektowe osadzają je bezpośrednio w SVG jako elementy <image/> , chociaż nie jest to zalecane podejście, jeśli chodzi o wydajność. Jeśli naprawdę potrzebujesz użyć obrazów rastrowych w swoim SVG, sugeruję usunięcie tagu obrazu z SVG i użycie go jako samodzielnego pliku:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Uderzenia

Atrybut stroke w SVG, podobnie jak atrybut fill , akceptuje kolory w różnych formatach, np. hex, RGB czy HSL. Podobnie jak w przypadku fill możesz kontrolować krycie obrysu za pomocą stroke-opacity . Podobnie jak w przypadku fill , obrysy mogą używać gradientów jako wartości. Wszystkie te efekty można osiągnąć w narzędziach projektowych i z powodzeniem wyeksportować do SVG.

Czapki i łączenia udarów

Istnieje jednak również kilka cech charakterystycznych dla uderzeń. Po pierwsze, możesz kontrolować szerokość obrysu. Obsługują go narzędzia projektowe i są one eksportowane jako atrybut stroke-width . Możesz także kontrolować końce i łączenia uderzeń. SVG pozwala zdefiniować je za pomocą stroke-linecap i stroke-linejoin . Istnieją trzy możliwe nasadki: nasadka butt , nasadka round i nasadka square oraz trzy możliwe połączenia: połączenie bevel , połączenie round i połączenie miter . Zakończeniami i połączeniami można sterować w programach Illustrator, Figma i Sketch, a dostępne zakończenia i połączenia pasują do tych dostępnych w SVG.

Kreski i kropkowane kreski

Innym efektem, jaki możemy osiągnąć za pomocą pociągnięć, są pociągnięcia kreskowane. W programach Illustrator i Figma można ustawić wiele kresek i przerw, podczas gdy w programie Sketch możliwa jest tylko jedna sekwencja kresek i przerw.

SVG umożliwia tworzenie linii przerywanych z atrybutem stroke-dasharray . stroke-dasharray pozwala na przekazanie sekwencji wielu kresek i przerw jako wartości, która odpowiada funkcjom Figma i Illustrator. Oznacza to również, że Sketch nie pozwala w tym przypadku na wykorzystanie pełnych możliwości SVG.

Ciekawym przypadkiem krawędzi jest linia przerywana. Osiągamy to ustawiając stroke-linecap na round , a długość kreski na zero, np.:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Uwaga : Obecnie użytkownicy Figma napotykają błąd, który nie pozwala im tworzyć linii przerywanych. Na przykład użycie 0, 10 lub 10, 0 jako kreski jest interpretowane w taki sam sposób jak 10, 10 i daje zwykłą linię przerywaną, a nie przerywaną. Na szczęście jest sposób na obejście tego. Zamiast używać zera, użyj bardzo małej wartości, np. 0.0001, 10 — zgodnie z oczekiwaniami powinno to skutkować idealnie kropkowaną linią.

Wyrównanie skoku

Istnieje jeszcze jedna, znacznie bardziej znacząca różnica między narzędziami do projektowania a SVG: wyrównanie obrysu. Illustrator, Sketch i Figma pozwalają kontrolować wyrównanie pociągnięcia i ustawić go wewnątrz, na zewnątrz lub wyrównać do środka. Ale zgadnij co? SVG 1.1 nie obsługuje wyrównania obrysu. W SVG wszystkie pociągnięcia są pociągnięciami wyrównanymi do środka. Brak uderzeń wewnętrznych lub zewnętrznych. Dlatego podczas eksportowania pociągnięć wyrównanych na zewnątrz i do wewnątrz do SVG dzieją się bardzo dziwne rzeczy.

W takim przypadku program Illustrator eksportuje kształt i jego obrys jako dwa oddzielne kształty. Zatem jeśli zastosujesz obrys wewnętrzny lub obrys zewnętrzny do prostokąta w programie Illustrator, w SVG spowoduje to powstanie prostokąta i oddzielnego elementu <path /> reprezentującego obrys prostokąta, np.:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

To zachowanie ma bardzo ważne reperkusje. Na przykład nie można już zmieniać szerokości obrysu ani przerywać go. Nie skaluje się również w taki sam sposób, jak „prawdziwe” pociągnięcia. Co więcej, Illustrator zmienia wymiary oryginalnego kształtu, np. kwadrat 100×100 z 20-jednostkowym pogrubionym obrysem wewnętrznym zostanie wyeksportowany jako kwadrat 120×120, aby uniknąć problemów z renderowaniem. W końcu to po prostu nie udar. To po prostu inny kształt z wypełnieniem.

Figma i Sketch mają jednak inne podejście. Wiernie eksportują wszystkie obrysy jako obrysy, ale przeliczają wymiary kształtu. Więc jeśli masz okrąg o promieniu równym 5 i obrysie wewnętrznym równym 2, to, co znajdziesz w swoim SVG, będzie okręgiem o promieniu równym 4 (i obrysie wciąż równym 2).

Takie podejście pozwala Figma i Sketchowi uniknąć większości problemów wspomnianych w przypadku Illustratora. Jednak przy niektórych bardziej skomplikowanych kształtach technika ta może okazać się nieprecyzyjna, a efekt końcowy może być nieco inny niż oczekiwano. Dlatego podejście Sketch i Figma niekoniecznie jest lepsze — jest zdecydowanie bardziej semantyczne, wydajniejsze i elastyczne, ale rozwiązanie Illustratora jest dokładniejsze.

Uwaga: ten sam problem z wyrównaniem obrysu dotyczy również CSS. Właściwość CSS border nie obsługuje również wyrównania wewnętrznego ani zewnętrznego. Jeśli jednak chcesz, możesz zhakować to zachowanie za pomocą właściwości outline i box-shadow .

Wiele wypełnień i obrysów

W narzędziach do projektowania można dodać wiele wypełnień i obrysów na warstwę. Ma to sens w połączeniu z takimi atrybutami, jak krycie i tryby mieszania. Niestety SVG nie obsługuje takiej funkcji. Jeśli wyeksportujesz warstwę, która ma wypełnienia i/lub obrysy, zostanie ona pomnożona, a każdy z obrysów i wypełnień zostanie zastosowany do własnej warstwy.

Cienie, filtry i inne efekty

Porozmawiajmy teraz o mniej popularnych efektach. SVG to bardzo potężny język, w rzeczywistości znacznie potężniejszy niż ten, którego zwykle używa się w sieci. Jedną z najciekawszych funkcji SVG jest szeroka gama zaawansowanych efektów wizualnych, znanych jako filtry SVG.

Pełny zakres możliwości filtra SVG jest zbyt szeroki, aby można go było opisać w tym artykule. Jeśli chcesz dowiedzieć się więcej na ich temat, gorąco zachęcam do zapoznania się z prelekcjami i artykułami na ten temat autorstwa Sarah Soueidan.

Filters, same as patterns or gradients, need to be defined to apply them later to a layer. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. We can. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Tryby mieszania

Tryby mieszania (takie jak Darken , Multiply lub Overlay ) umożliwiają mieszanie dwóch lub więcej elementów poprzez łączenie ich wartości na różne sposoby. Dobrze znane grafikom (i aplikacjom takim jak Adobe Photoshop), tryby mieszania działają również w Sketch, Figma i Illustrator.

W SVG tryby mieszania istnieją jako jeden z filtrów. Mają swój własny prymityw filtra <feBlend /> . Jednakże, ponieważ <feBlend /> jest dość skomplikowana, Sketch, Figma i Illustrator używają CSS zamiast tego:

 .rectangle { mix-blend-mode: overlay; }

Ponieważ obecnie obsługa przeglądarek mix-blend-mode jest dość dobra, nie powinno to stanowić dużego problemu. Jeśli jednak ważne jest, aby zapewnić kuloodporną obsługę przeglądarek, w tym Microsoft Edge i IE, będziesz musiał ręcznie zastąpić tryby mieszania CSS filtrami SVG.

Podobnie jak w przypadku wielu wypełnień i obrysów, SVG nie obsługuje trybów mieszania stosowanych bezpośrednio do atrybutów wypełnienia i obrysu (zamiast na całych warstwach). Jeśli spróbujesz wyeksportować wypełnienie i obrysy z ich własnymi trybami mieszania z narzędzia projektowego do SVG, warstwa zostanie zwielokrotniona, a tryby mieszania zostaną zastosowane do odpowiednich kopii warstwy.

Symbole i komponenty

W niektórych przykładach kodu powyżej mogłeś zauważyć element, o którym jeszcze nie rozmawialiśmy: element <use>…</use> . <use> pozwala nam definiować i ponownie wykorzystywać elementy w SVG, trochę podobnie do Symbols w Illustratorze i Sketchu lub Components w Figma. Pamiętasz definiowanie wzorów, gradientów i filtrów w <defs>…</defs> , aby można było ich użyć w innej części kodu SVG? W rzeczywistości każdy element SVG może być zdefiniowany i ponownie użyty w ten sposób. Po zdefiniowaniu kształtu lub grupy możesz odwoływać się do niego w dalszej części dokumentu dowolną liczbę razy, np.:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

Możesz również ponownie użyć znacznie bardziej złożonych struktur, używając <symbol>…</symbol> . Symbol działa jako osobna treść w naszym SVG i może mieć swój własny atrybut viewBox (zobacz Width, height i viewBox dla odniesienia).

Czy to oznacza, że ​​symbole i komponenty naszych narzędzi projektowych zostaną wyeksportowane do symboli SVG? W programie Illustrator — tak, tak. W Sketch i Figma — nie, nie. Czemu? Przede wszystkim dlatego, że symbole programu Illustrator są dość proste i można je łatwo przetłumaczyć na SVG, podczas gdy symbole Sketch i komponenty Figma wcale nie są takie proste, a eksportowanie niektórych jego funkcji (takich jak zagnieżdżone nadpisania) byłoby bardzo trudne lub nawet niemożliwe.

Tekst

Nie byłby to wyczerpujący przewodnik, gdybyśmy nie wspomnieli o typografii. Wszystkie narzędzia do projektowania oferują szeroką gamę narzędzi związanych z tekstem. SVG, chociaż zwykle używany do grafiki, obsługuje również elementy tekstowe.

Illustrator, Sketch i Figma obsługują eksportowanie tekstu do SVG i przeliczają warstwy tekstu na elementy <text>…</text> w SVG. Elementy tekstowe SVG są renderowane jak inne elementy graficzne, kształty itp., z tą tylko różnicą, że są tekstem.

Podobnie jak w CSS, możemy kontrolować wszystkie podstawowe parametry tekstu, takie jak grubość, wysokość linii czy wyrównanie. W rzeczywistości, jeśli wiesz, jak stylizować tekst w CSS, wiesz już, jak to zrobić w SVG. Może to jednak wydawać się nieco staroświeckie. Po pierwsze, wszystkie parametry muszą być ustawione w atrybutach inline, podobnie jak w złotych standardach HTML 3.2. Po drugie, nie ma skrótów. Na przykład nie znajdziesz niczego, co przypominałoby właściwość CSS font . Dzieje się tak, ponieważ atrybuty tekstowe SVG są oparte na specyfikacji CSS 2, która przenosi nas w lata 90-te i są znacznie starsze niż CSS, który znamy dzisiaj.

Niemniej jednak wszystkie te atrybuty są doskonale eksportowane z narzędzi projektowych za każdym razem, gdy chcemy, aby jakaś warstwa tekstowa stała się kodem SVG.

Niestandardowe czcionki

Niestety, sprawy stają się nieco skomplikowane, jeśli chodzi o niestandardowe czcionki. W dawnych czasach, gdy tworzono standard SVG 1, niestandardowe kroje pisma nie były powszechną rzeczą w sieci. Wszyscy używali standardowych czcionek, takich jak Tahoma, Verdana czy Courier. Wymyślanie i używanie czcionek, których ludzie domyślnie nie mieli na swoich komputerach, zwykle oznaczało ich bezwzględną rasteryzację i używanie jako obrazów. Jednak SVG zaimplementował własny format czcionek, nazwany czcionkami SVG. Dzisiaj, 18 lat po opublikowaniu SVG 1.0, czcionki SVG nie są już obsługiwane w większości głównych przeglądarek.

Na szczęście dla nas SVG bardzo ładnie współpracuje z CSS, co oznacza, że ​​możemy używać czcionek internetowych zamiast czcionek SVG, np.:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Pozwolę sobie nie zagłębiać się w szczegóły implementacji czcionek internetowych poza jedną zasadniczą uwagą: nie zapomnij o tym. Innymi słowy, jeśli używasz własnych czcionek w swoim SVG, musisz pamiętać o dostarczeniu tych czcionek klientowi, tak samo jak w HTML/CSS.

Zarysowanie czcionek

Można argumentować, że o wiele łatwiej niż walczyć o czcionki i wszystko inne, byłoby zarysowanie wszystkich warstw tekstowych i nie martwienie się nimi na zawsze. Niemniej jednak istnieje co najmniej kilka dobrych powodów, aby nie zmieniać tekstu w kształty:

1. Nie możesz edytować tekstu z konturem — ani przed, ani po wyeksportowaniu.
   Pracując z tekstem z konturem, musisz pamiętać o tym, aby przez cały czas przechowywać edytowalną kopię w pliku Illustrator, Sketch lub Figma. W przeciwnym razie nie będzie można edytować warstw tekstowych po ich zarysowaniu. To niepotrzebnie komplikuje proces. Nie wspominając o edytowaniu zaznaczonego tekstu po wyeksportowaniu SVG. Tekst w SVG można aktualizować w dowolnym momencie. Zarysowany tekst wymaga otwarcia pliku źródłowego za każdym razem, gdy chcesz dokonać najmniejszej zmiany kopii.
2. Zarysowany tekst jest niedostępny .
   Tekst w formacie SVG, podobnie jak inne elementy tekstowe w Internecie, może być odczytywany przez czytniki ekranu i inne dostępne technologie. Określając warstwy tekstowe, uniemożliwiasz ludziom korzystanie z takich technologii przed dostępem do Twoich treści.
3. Ludzie oczekują, że tekst będzie tekstem .
   Większość osób korzystających z sieci nie wie absolutnie nic o SVG, HTML czy narzędziach do projektowania. Jeśli widzą tekst, spodziewają się, że to właśnie to. Mogą go wybrać, skopiować lub umieścić w wyszukiwarce. Wszystko to jest możliwe z tekstem w SVG — chyba że go zarysujesz.
4. Nie zapomnij o SEO .
   Tekst w SVG jest również dostępny i używany przez wyszukiwarki. Zarysowując tekst, sprawiasz, że treść jest mniej dostępna do wyszukiwania i potencjalnie mniej widoczna dla publiczności.

Streszczenie

Bardzo dziękuję za udanie się ze mną w podróż przez tajniki pracy z SVG i narzędziami do projektowania. Ten artykuł zdecydowanie nie obejmuje pełnego spektrum tematu, chociaż powinien wystarczyć, aby poradzić sobie z najczęstszymi przypadkami użycia. Jeśli masz jakieś pytania lub wątpliwości dotyczące rzeczy, które nie zostały tutaj wymienione, nie wahaj się zamieścić ich w komentarzach!