Front End Center — Why Inline SVG is Best SVG
SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques.
In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction that only need a handful of lines of SVG + CSS. But we'll also consider why it is that Inline SVG, in particular, is so much easier to work with than embedding SVG in other ways.
Want to see more? Subscribe at https://frontend.center
Видео Front End Center — Why Inline SVG is Best SVG канала Front End Center
In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction that only need a handful of lines of SVG + CSS. But we'll also consider why it is that Inline SVG, in particular, is so much easier to work with than embedding SVG in other ways.
Want to see more? Subscribe at https://frontend.center
Видео Front End Center — Why Inline SVG is Best SVG канала Front End Center
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![SVG can do that?! (Sarah Drasner)](https://i.ytimg.com/vi/ADXX4fmWHbo/default.jpg)
![Front End Center — Image CDNs to the Rescue](https://i.ytimg.com/vi/_lQvw2vSDbs/default.jpg)
![Front End Center — Single Responsibility Components: Object-Oriented Design in React](https://i.ytimg.com/vi/pSdp92Up8O8/default.jpg)
![Making Future Interfaces: Inline SVG](https://i.ytimg.com/vi/1CDTw_UpQoQ/default.jpg)
![What are SVG viewport and viewBox? [ A beginners guide to SVG part 3 ]](https://i.ytimg.com/vi/TBYJ2V1jAlA/default.jpg)
![Front End Center — Webpack from First Principles](https://i.ytimg.com/vi/WQue1AN93YU/default.jpg)
![A beginners guide to SVG | Part One: The Why, What, and How](https://i.ytimg.com/vi/ZJSCl6XEdP8/default.jpg)
![Chris Coyier - The Wonderful World of SVG](https://i.ytimg.com/vi/tsGa-gcckwY/default.jpg)
![Andrew MacMurry - Building Seeds: A Smartphone Game for the Browser @ Elm in the Spring](https://i.ytimg.com/vi/HaKDiAKt3ZA/default.jpg)
![SVG Explained in 100 Seconds](https://i.ytimg.com/vi/emFMHH2Bfvo/default.jpg)
![SVG Animation With Text Tutorial | HTML CSS](https://i.ytimg.com/vi/vJNVramny9k/default.jpg)
![Front End Center — Why Latency Matters: Foundations of Web Performance](https://i.ytimg.com/vi/ak4EZQB4Ylg/default.jpg)
![Cyberpunk 2077 Radio Mix (Electro/Cyberpunk)](https://i.ytimg.com/vi/Q9yn1DpZkHQ/default.jpg)
![SVG CAN DO THAT?!](https://i.ytimg.com/vi/dv2TvTXQ4FQ/default.jpg)
![SVG Path Tutorial • Easy to Understand!](https://i.ytimg.com/vi/2IY-xTCFjiM/default.jpg)
![SwiftUI - SVG to UIBezierPath with Animation](https://i.ytimg.com/vi/IUpN7sIwaqc/default.jpg)
![Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)](https://i.ytimg.com/vi/P35hQOsW0xU/default.jpg)
![Varun Vachhar — Creative Coding with React & SVG](https://i.ytimg.com/vi/D40JphLwqpk/default.jpg)
![Sara Soueidan - Building Better Interfaces With SVG](https://i.ytimg.com/vi/lMFfTRiipOQ/default.jpg)
![SVG can do that?! - talk by Sarah Drasner](https://i.ytimg.com/vi/4laPOtTRteI/default.jpg)