Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

CSS and SVG - The Dynamic Duo

Web Conferences Amsterdam via YouTube

Overview

Explore the dynamic synergy between CSS and SVG in this conference talk from CSS Day 2016. Discover how to transform static SVG images into interactive, responsive graphics using CSS. Learn about the similarities and differences between CSS for SVG and HTML, and gain practical tips to avoid common pitfalls. Delve into exciting topics such as applying CSS animations and transitions to SVG properties, leveraging CSS inheritance and reusable SVG icons for theme variations, designing CSS media queries for SVG in responsive designs, and utilizing SVG-defined filters, masks, and clip-paths as CSS effects for HTML. While accessible to SVG beginners with CSS knowledge, this rapid overview focuses on enhancing existing SVG code rather than providing a general introduction. Access the accompanying slides for visual reference and explore the speaker's social media for additional insights.

Syllabus

Intro
Enter SVG
CSS and SVG
CSS Special Skills
CSS Styling SVG
SVG as Image
SVG as Embedded Object
Inline SVG
Demos
Hero Text
Media Queries

Taught by

Web Conferences Amsterdam

Reviews

Start your review of CSS and SVG - The Dynamic Duo

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.