Optimising SVGs for the Web
A guide to optimizing SVG files for web use, covering manual cleanup and automated tools like SVGOMG to reduce file size.
A guide to optimizing SVG files for web use, covering manual cleanup and automated tools like SVGOMG to reduce file size.
Explores CSS Motion Path for animating elements along SVG paths using only CSS, with examples and techniques.
A case study on implementing accessible data visualizations using SVG for the Khan Academy 2018 Annual Report website.
A developer's tool for converting SVG path commands between all-relative and all-absolute formats, with a focus on easier path manipulation.
A developer builds a Node.js API that generates GitHub badges showing a project's 'mood' based on the average time of day commits are made.
A tutorial series explaining SVG filters, covering various filter primitives like feMorphology and feComponentTransfer for visual effects.
Explains the CSS mask property with a practical demo for dynamically coloring SVG icons using CSS variables and JavaScript.
A critical look at the CSS pointer-events property, arguing against its use on standard HTML elements while acknowledging valid SVG use cases.
A list highlighting 20 influential women in web design and development, celebrating their contributions and providing role models in tech.
A guide to SVG filters, covering basics, practical applications, and resources from a talk by Sara Soueidan.
A web developer shares a list of influential front-end writers and their blogs, focusing on CSS, JavaScript, and web development insights.
A technical guide on creating dynamic, scroll-responsive Bézier curves and swoopy shapes using SVG and React.
Explains how to use CSS filters, particularly brightness() and hue-rotate(), to dynamically change the color of SVG background images.
A developer's journey creating a custom Vue component to inline SVG icons, avoiding external libraries and manual file paths.
A guide to creating multi-colored SVG icon systems using CSS variables, comparing them to icon fonts and explaining setup and styling.
Using SVG's viewBox and preserveAspectRatio attributes to crop and scale images as a fallback or alternative to CSS object-fit.
A beginner's guide to creating smooth animations using the Greensock Animation API (GSAP), covering installation, tweens, and core methods.
A guide on implementing SVG patterns as backgrounds in React applications, including code examples and tool recommendations.
A tutorial on creating custom bar charts in React using SVG components, without relying on external charting libraries.
A technical exploration of using SVG's <foreignObject> and canvas to render interactive DOM elements as textures in WebGL, bypassing manual font/layout work.