Screencasty wideo 2025, Styczeń

Dzięki za oglądanie wszystkich, to znaczy wszystko dla mnie i dla tej strony. Ten post na blogu to ogromna lista zasobów dotyczących wszystkiego, co omówiliśmy w tej serii ”

Kiedy używasz inline, wszystkie elementy znajdują się w DOM, tak jak s i si każdy inny element HTML. Jeśli masz SVG jak: i robisz: var rect = "

W tym screencastie zagłębiamy się w artykuł Léonie Watson, który dotyczy dostępnego formatu SVG i zasadniczo omawiamy go punkt po punkcie. Podoba mi się, że pierwszy punkt ”

Spędziliśmy dużo czasu rozmawiając o używaniu inline i elementu. Możesz zbudować system ikon, który ma wiele zalet. Możesz utworzyć „

Z SVG można zrobić wiele bez żadnego oprogramowania. Zakładając, że masz dobre źródło obrazów SVG online, możesz ich użyć bezpośrednio. Ale"

JavaScript to ostatni ze sposobów, które omówimy w animowaniu SVG. Przyjrzeliśmy się CSS, który jest świetny i całkiem wygodny, ale nie obsługuje wielu plików SVG ”

Koncepcja obcinania i maskowania jest dość prosta. Ukryj określone części elementów i pokaż inne. Faktyczna różnica między nimi jest dość prosta ”

Być może słyszałeś o filtrach CSS? Możesz je zastosować do dowolnego elementu z CSS, takiego jak: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Prawdopodobnie nie ma dla tego ogromnego zastosowania, poza oczywistym: potrzebujesz grafiki rastrowej między innymi w większym projekcie SVG ”.

Może nadejść dzień, w którym chciałbyś, aby grafika była SVG, ale masz ją tylko w formacie rastrowym, takim jak GIF, JPG.webp lub PNG. W tym filmie przedstawiamy przykład „

Popularną techniką animacji SVG jest rysowanie ścieżek. Jeśli nie możesz tego sobie wyobrazić, oto zbiór milionów przykładów, które stworzyłem. Zasadniczo „

W SVG jest element. Nic dziwnego: służy do umieszczania tekstu w pliku SVG. Nie kontury kształtów liter (chociaż możesz to zrobić), ale „

Jest to trochę ezoteryczna rzecz, po prostu musiałem to zrobić sam raz i uznałem to za zagmatwane, więc pomyślałem, że zrobię o tym cały film. Rzecz w tym,"

Ten film został usunięty. Niedługo zrobię to ponownie. Jeśli to czytasz, a ja jeszcze tego nie zrobiłem, skontaktuj się ze mną i zgłoś mi błąd ”

Ta wskazówka ma zastosowanie tylko w przypadku posiadania programu Adobe Illustrator CC (Creative Cloud). Potwierdziłem, że działa w tym lub w jeszcze nowszym CC 2014. To tak proste, jak to tylko możliwe ”

Chociaż animowanie SVG za pomocą CSS może być wygodniejsze dla przeciętnego użytkownika, SVG ma inny sposób tworzenia animacji wbudowany bezpośrednio w SVG ”

Kiedy używasz wbudowanego SVG, cały ten kod SVG znajduje się bezpośrednio w HTML, a więc w DOM. Możesz stylizować je tak jak w przypadku, lub jakikolwiek inny kod HTML ”

Dowiedzieliśmy się, że ograniczeniem użycia do wstawienia fragmentu SVG jest to, że nie można pisać złożonych selektorów CSS, które mają tam wpływ. Na przykład: że „

Termin „narzędzie do budowania” może być przerażający. To przywodzi na myśl fantazyjne narzędzia wiersza poleceń wymagające konfiguracji i dziwnych zależności systemowych, które psują się, gdy ty

Wbudowany plik SVG można „stylizować” w tym sensie, że ma już wypełnienia i obrysy, a także w momencie umieszczenia go na stronie. To niesamowite i całkowicie "

Witryny ze zdjęciami stockowymi zawsze mają możliwość filtrowania wyników wyszukiwania według „wektora”. I pamiętaj, bez względu na format, jaki otrzymasz, gdy coś pobierzesz ”

Dowiedzieliśmy się, że narzędzia do budowania są szczególnie przydatne do zadań, takich jak przekształcanie folderu pełnego plików SVG w blok plików SVG. Jak zawsze w przypadku „

Z pewnością możemy stać się trochę bardziej nerdowsi dzięki naszym narzędziom do kompilacji. W momencie publikowania tego plakatu podrzędnym narzędziem do budowania jest Grunt. Są konkurenci ”

Kiedy już mamy to, co nazywamy naszym „blokiem defs” SVG - ten fragment SVG, który definiuje wszystko, co chcemy narysować później - gdzie to umieścimy? Więc"

Element jest sprzężeniem z całą ideą wbudowanego systemu ikon SVG. Dowiedzieliśmy się, że czystym sposobem na zrobienie tego jest umieszczenie wszystkiego, co zamierzasz narysować później ”

Umieszczenie tego bloku SVG na górze dokumentu zdecydowanie działa. Ma też kilka zalet, na przykład fakt, że nie trzeba wysyłać żadnych żądań HTTP ”,

SVG ma bardzo fajny i potężny element o nazwie. Koncepcja jest dość prosta. Znajduje inny fragment kodu SVG, do którego odwołuje się identyfikator, i klonuje go „

Omówiliśmy „inline SVG” - czyli upuszczenie składni SVG bezpośrednio do HTML. Możesz użyć tego samego wbudowanego SVG również w innych miejscach, np. W lub „

Pamiętaj, że wszystko, co wektor możesz umieścić w SVG. Oprogramowanie Adobe jest w tym świetne. W pliku PDF mogą znajdować się elementy wektorowe - po prostu otwórz plik PDF, a „

Projekt Noun to (bardzo) fantastyczne miejsce, z którego można pobrać pliki SVG. Policzmy sposoby Dosłownie wszystko w SVG i tak właśnie się dzieje.