Grafika SVG wyjaśniona w 100 sekund - z przykładami kodu (film, nieco ponad 100 sekund...)
Fireship rozpoczął tę fascynującą podróż w świat grafiki wektorowej, omawiając, czym są Scalable Vector Graphics (SVG). SVG to format obrazu, który działa jak HTML dla grafiki 2D, w przeciwieństwie do obrazów rastrowych, takich jak PNG czy JPEG, które składają się z siatki pikseli. Kiedy przybliżamy zdjęcie rastrowe, piksele stają się większe, a obraz traci swoją jakość. Z kolei obraz wektorowy zyskuje na wielkości bez utraty ostrości, ponieważ jego wygląd oparty jest na geometrii. Autor zachęca do tworzenia SVG za pomocą narzędzi takich jak Figma czy Illustrator, choć równie dobrze można je stworzyć pisząc kod bezpośrednio, co otwiera drzwi do animacji i interaktywności.
W filmie Fireship przytacza konkretne przykłady, jak stworzyć grafiki SVG. Na początek należy otworzyć tag SVG, a następnie zdefiniować układ współrzędnych za pomocą atrybutu viewbox. Umożliwia to rysowanie podstawowych kształtów, takich jak prostokąt, okrąg czy wielokąt. Autor szczegółowo wyjaśnia, jak umieszczać prostokąt, definiując jego wartości XY na układzie współrzędnych oraz przydzielając mu rozmiar, który może być ustalony explicite lub responsywnie. Można również zmieniać kolor kształtu przez atrybut fill oraz poprawiać jego obramowanie za pomocą atrybutu stroke.
Fireship wyjaśnia również, że jeśli stylizacja staje się zbyt skomplikowana, możemy przenieść wszystko do osobnego arkusza stylów CSS. Dzięki zastosowaniu klas, mamy pełnię mocy CSS, co pozwala nam reagować na zdarzenia dotyczące kształtów i dostosowywać ich stylizację lub animację. To sprawia, że SGV stają się niezwykle elastyczne w tworzeniu bardziej złożonych grafik, które wykraczają poza podstawowe kształty.
W skomplikowanych dziełach sztuki zastosowanie znajduje element path. Kształt ścieżki określa jeden atrybut, D, który jest używany do rysowania. Kodowanie ścieżki przypomina kontrolowanie końcówki pióra za pomocą serii poleceń. Na początek używa się polecenia M, które przemieszcza końcówkę pióra do współrzędnych XY. Duże litery oznaczają ruch względem układu współrzędnych, a małe litery – względem ostatniego punktu w ścieżce. W filmie omawiane jest także, jak można rysować krzywe przy użyciu poleceń C i Q, oraz jak SVG automatycznie oblicza smooth curve.
Na koniec Fireship zaprasza do subskrybowania swojego kanału, prosząc widzów o wciśnięcie przycisku „lubię to”, aby zobaczyć więcej krótkich filmów na ten temat. Z wideo wynika, że miało ono 955315 wyświetleń i 44396 polubień w momencie pisania tego artykułu, co dowodzi dużego zainteresowania tym tematem w społeczności.
Toggle timeline summary
-
Wprowadzenie do Scalable Vector Graphics (SVG) jako formatu obrazu 2D podobnego do HTML.
-
Wyjaśnienie różnicy między obrazami wektorowymi a rastrowymi, podkreślając problem pikselizacji.
-
Obrazy wektorowe można skalować bez utraty rozdzielczości dzięki ich geometrycznej naturze.
-
Tworzenie SVG może być realizowane za pomocą narzędzi projektowych lub poprzez kodowanie.
-
Podstawy definiowania SVG za pomocą viewbox do rysowania grafiki.
-
Instrukcje dotyczące rysowania kształtów za pomocą elementów SVG, takich jak prostokąt, okrąg i wielokąt.
-
CSS może być używane do stylizacji kształtów SVG, umożliwiając złożoną stylizację.
-
Interakcja i obsługa zdarzeń z kształtami SVG przy użyciu klas CSS.
-
Wprowadzenie do elementu path dla skomplikowanych dzieł sztuki w SVG.
-
Kodowanie ścieżki w SVG polega na kontrolowaniu końcówki pióra za pomocą komend.
-
Komendy do rysowania linii i krzywych, podkreślając użycie komend takich jak L, C i Q.
-
Podsumowanie tego, co zostało omówione w 100 sekundach na temat SVG.
-
Zachęta do polubienia i subskrybowania, aby otrzymywać więcej treści.
Transcription
Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2D graphics. They differ from raster images, like PNG or JPEG, that use a grid of tiny pixels to create an image. And as you zoom in, the pixels become larger, making the image grainy. In contrast, a vector image can be scaled to any size without losing its resolution. Because instead of fixed pixels, its appearance is based on geometry. You can create SVGs with tools like Figma or Illustrator. Or, by writing the code directly, which is easier than you might think, and opens the door to animation and interactivity. Create one by opening an SVG tag, then define a coordinate system with the viewbox attribute. That gives us a frame with a width and height of 100 units on which we can draw graphics. Draw basic shapes by adding elements like rectangle, circle, and polygon. Position the rectangle by defining its XY value on the viewbox. Then give it a size, which can take values that are either explicit or responsive. We can change the color of the shape by defining its fill, or define an outline with the stroke attribute. And if our styling gets too complex, we can extract everything into a separate CSS style sheet. By applying a class to it, just like any HTML element, we have the full power of CSS at our fingertips. Which means we can react to events on the shapes, and then change their styling or animation accordingly. But most graphics are more than just basic shapes. They contain complex artwork with all kinds of twists and turns. And that's where the path element comes in. The shape of a path is determined by one attribute, D, for draw. Coding a path is like controlling the tip of a pen with a series of commands. The most basic command is M for move, which will move the pen tip to an XY coordinate. An uppercase letter means move relative to the viewbox, and lowercase means move relative to the last point in the path. But move doesn't actually draw anything. To put the pen tip down on the paper and draw something, use the L command. It works exactly like move, but draws a line that can be styled. Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator? Create bezier curves with the C and Q commands. Define the position of two control points, then the X and Y coordinates where the curve should end. Then SVG will automatically calculate a smooth curve for you at any scale. This has been Scalable Vector Graphics in 100 seconds. If you want to see more short videos like this, hit the like button and subscribe. Thanks for watching, and I will see you in the next one.