Jak eksportować wzorce SVG

Kiedyś było tak, że można po prostu wygładzać obraz taflowy jako plik gif lub jpg w rozdzielczości 72dpi i wstawić go za pomocą CSS. Jest to powszechna praktyka wśród projektantów stron internetowych i jest stosowana od lat; to szybki i łatwy sposób na dodanie wzoru lub tekstury do swojej pracy. Potem te brzydkie cielesne oczy na pokazach siatkówki Apple i zanim się zorientowaliśmy piksel nie był pikselem dłużej. Nagle te ukochane wzorce przeszły do ​​historii.

SVG (skalowalna grafika wektorowa) szybko stają się standardem dla wyraźnej grafiki w sieci. Rozwiązują problem konieczności tworzenia oddzielnych plików graficznych w celu dostosowania do urządzeń siatkówki. Są naprawdę zabawne i łatwe do stworzenia, i otwierają świat możliwości ...

Krok 1: Utwórz wzór

Istnieją dziesiątki różnych aplikacji, które pozwolą Ci zaprojektować wzór SVG. Moim ulubionym jest Illustrator, więc właśnie tego będę używał.

Otwórz Adobe Illustrator i utwórz nowy dokument o wymiarach 300 na 300 pikseli. Następnie przejdź do Object> Pattern> Make, a twoje płótno ulegnie zmianie. Zauważysz, że na środku obszaru roboczego pojawi się niebieski kwadrat. Również panel opcji wzoru będzie otwarty.

Zanim zaczniemy, musimy dokonać drobnej korekty. Przejdź do panelu opcji wzoru i odznacz opcję Przenieś kafelek z rysunkiem. (Ta funkcja jest denerwująca, ponieważ nie będziesz w stanie przesuwać ani umieszczać grafiki w obszarze kwadratu wzoru, która będzie się poruszać wraz z nią, jeśli nie usuniesz zaznaczenia tej opcji).

Następnie niebo jest ograniczeniem tego, jaki rodzaj wzoru możesz stworzyć. Domyślnie kwadrat wzorca jest ustawiony na 100 pikseli x 100 pikseli. Możesz wybrać dowolny rozmiar. Opuściłem mój domyślnie.

Następnie narysuj kwadrat o wielkości 50 na 50 pikseli. Wyrównaj go do górnej i prawej krawędzi kwadratu.

Następnie kliknij i przytrzymaj mysz nad narzędziem Pióro . Pojawią się narzędzia podrzędne, w których można wybrać narzędzie Dodaj punkt kontrolny . Stąd dodaj punkt zakotwiczenia do środka lewej i prawej strony kwadratu.

Za pomocą narzędzia Zaznaczanie bezpośrednie zaznacz punkty kontrolne (przytrzymaj klawisz Shift, aby wybrać obie.) Następnie z górnego menu wybierz polecenie Obiekt> Przekształć> Przesuń.

Przesuń dwa punkty o 20 pikseli w prawo, aby utworzyć rodzaj strzałki.

Następnie zduplikuj kształt, przeciągając go do nowej pozycji, przytrzymując klawisz alt . (Lub skopiuj i wklej, jeśli wolisz.)

Wybierz nowy kształt i przeciągnij go do lewego dolnego rogu kwadratu wzoru.

Przy wciąż wybranym kształcie chwyć róg i obróć o 180 stopni. (Przytrzymaj klawisz Shift , aby przyciągnąć do dokładnie 180 stopni).

Z górnego menu wybierz polecenie Obiekt> Przekształć> Przenieś i przenieś nowy kształt -20 pikseli.

Na koniec kliknij przycisk Zapisz kopię u góry okna, nadaj nazwę wzorowi i zapisz go, aby ukończyć wzór. Zapisanie kopii jest ważne, jeśli chcesz ją później edytować. To powstrzymuje cię od ponownego odtworzenia go.

Krok 2: Eksportuj wzór

Zauważysz, że po wyjściu z trybu deseń wzór jest automatycznie wybierany jako wypełnienie. Wszystko, co musisz zrobić, to narysować kształt na obszarze roboczym i będzie on wypełniony wzorem. (Jeśli z jakiegoś powodu zmieniłeś wypełnienie kształtu, możesz znaleźć swój wzór w panelu próbek, zastosować go jak każde inne wypełnienie).

Następnie zmień rozmiar kształtu tak, aby obejmował cały obszar o wymiarach 300 na 300 pikseli.

Wybierz Plik> Zapisz jako. Zapisz swój plik jako .svg.

Następnie pojawi się okno dialogowe, w którym możesz wybierać spośród różnych formatów i opcji SVG. Pamiętaj, aby kliknąć więcej opcji w lewym dolnym rogu, aby zobaczyć wszystkie dostępne opcje dla pliku SVG.

Typowy format to SVG 1.1, ponieważ jest to najczęściej używany i najczęściej obsługiwany format SVG. W tym polu będziesz także kontrolować, czy zachowasz możliwość edycji SVG w programie Illustrator, czy też możesz włączyć tekst na ścieżce, która może być przydatna. Możesz użyć SVG jako rzeczywistego pliku lub możesz skopiować kod i wkleić go bezpośrednio do dokumentu HTML. Po zakończeniu kliknij przycisk OK.

Krok 3: Edytuj wzór SVG

Otwórz plik .svg w edytorze tekstu. Używam Sublime Text, ale możesz używać Notatnika, Dreamweavera lub innego kodu HTML.

Otwórz ten sam plik w przeglądarce, aby wyświetlić podgląd zmian wprowadzonych w kodzie.

Jest kilka różnych obszarów, na których należy się skoncentrować. Najpierw musimy edytować granice pliku SVG, aby wypełnił on przeglądarkę.

Zobaczysz: na dnie. Zamiast tego zmień obie wartości od 300 do 100%. Twój kod będzie wyglądał następująco:

Nie należy jeszcze zauważać zmiany. Powinien to być kwadrat. Czemu? Ponieważ widok jest ustawiony na 300 x 300, które są wymiarami kwadratowymi. Aby wypełnić szerokość i wysokość przeglądarki, zmień kod w linii 4 z viewBox = "0 0 300 300", aby viewBox = "0 0 100% 100%" .

Po odświeżeniu przeglądarki wzór wypełnia naszą przeglądarkę od końca do końca. Problem polega na tym, że jeśli chcesz zmienić rozmiar wzoru? Czy wracasz do Illustratora i od nowa wszystko powtarzasz? Nie. Piękno tego, że Illustrator generuje twój kod SVG. Możesz po prostu edytować kod. Nie myśl o tym, jako czysto plik graficzny. Pomyśl o tym jako o pliku kodu, który możesz manipulować i zginać wbrew swojej woli.

Aby edytować rozmiar wzoru, poszukaj w linii 5. Po prostu zmień wartości szerokości i wysokości na dowolne. Zalecałbym zachowanie go w kwadratowych proporcjach, chyba że chcesz zniekształcić swój wzór. Gdy zmienię wartości na 70, wzór jest mniejszy, ale nadal wypełnia szerokość i wysokość ekranu.

Jeśli spojrzysz na kod, zobaczysz, że wzór składa się z wielokątów. Pierwszy wielokąt ma wypełnienie "none" (które produkuje biały), a reszta ma wartości szesnastkowe.

Aby zmienić kolory naszego wzoru, wszystko, co musimy zrobić, to zmienić wartości wypełnienia.

Jeśli jesteś osobą, która lubi kopiować i wklejać, oto nasz ostateczny kod SVG:

Jest to całkowicie poprawne, ale jest trochę niechlujne (dzięki Illustrator). Zalecam więc zoptymalizowanie go przed użyciem. Dostępnych jest wiele opcji optymalizacji, ale Peter Collingridge's jest jednym z najlepszych, daje nam ten ostatni kod:

Wniosek

Możliwość eksportowania próbek i wzorców programu Illustrator w postaci plików SVG otwiera wiele możliwości. Nie tylko możesz stworzyć wzór SVG, możesz edytować plik w ciągu kilku minut, kontrolując kolory, rozmiary i sposób, w jaki sam plik jest renderowany w przeglądarce.