Articles by Tag #svg
Browse our collection of articles on various topics related to IT technologies. Dive in and explore something new!
100% CSS: Fetch and Exfiltrate 512 bits of Server-Generated Data Embedded in an Animated SVG
This is a direct followup to to Getting 32 bit API Response Data in CSS In CSS, 16 bits of...
Generating SVG sprites (spritesheets) for ASP.NET apps
If you’ve ever wrangled dozens of SVG icons into a sprite sheet, you know how tedious and error-prone...
Building a Shapes Learning Exercise in Blazor with Radzen Components
🎓 Build an Interactive Shapes Learning Exercise with Blazor WebAssembly & Radzen...
How SVG Became the Standard Icon Format
Every app, be it mobile or web, is designed for multiple types of devices nowadays. Every component...
Icon Font vs SVG : Which One Should You Use?
Icons are everywhere on the web these days. They make websites easier to navigate and help users...
Curving Text Around a Circle Using SVG
In this tutorial, I’ll walk you through how to curve text along a circular path using SVG—just like...
Best Practices for Using Dynamic SVGs in Your Frontend
🔄 How often have you needed to update icons dynamically based on user interaction? Whether it's...
Reusing SVG Icons for Faster Pages
A lesser-known SVG feature can improve your website's performance.
The Surprisingly Weird World of Favicons (And How to Survive It)
Not a year goes by without another "how to use favicon this year" article. Let's recap what has...
Scroll SVG Path with Framer Motion
Hello! Over the past few days, I’ve been diving into the world of SVG path animations that respond to...
How to Apply Blur, Shadow, and Color Effects to Images Using SVG Filters
Want to add advanced visual effects like blur, shadows, or grayscale to images and HTML elements...
How to Import SVG Files to React + Vite Project (2025)
When working with React projects in Vite, you may want to import SVGs as React components instead of...
How to optimize SVG files for better use in projects?
We often come across large and complex SVG files full of redundancies, which can be a hassle....
🎨 ICONIC — A Curated Gallery of Open Source Skill Icons You Can Contribute To
🖼️ A beautiful, growing library of themed icons — powered by you. Project URL: GitHub Project -...
Should You Use Multiple Chevron SVG Images or Rotate a Single SVG Icon with CSS?
Adding a single chevron icon to the assets and rotating the others using CSS is a more efficient...
Rocket SVG Cursor
SVG implementation of a cool cursor canvas widget, edited to be a rocket
Svg Animations Done Easy
Ever heard of SVG? For the past year, I have been hobbying around using the new CSS feature to...
Empowering Designers and Developers with Effortless Image Conversion
In the fast-paced world of design and development, efficiency is everything. That's why I created a...
Iconoir: The Ultimate Icon Library for Modern Developers
Quick Summary: 📝 Iconoir is an open-source icon library offering over 1600 unique SVG...
SVG vs Canvas: Understanding the Differences and When to Use Each
When building interactive or visually rich web applications, you often have to decide between SVG...
🎥 Design, animate, and export video with AI— all in SVG, in your browser
Hey folks 👋 We’ve been building Framv — a motion-first design canvas built entirely around SVG, and...
Canvas vs. SVG: Understanding Their Functional Differences
When making web graphics, you’ll often use Canvas or SVG. While both can display graphics, they work...
4 Ways to Include SVG in HTML and a11y consideration
Here are 4 common approaches for including SVGs in HTML, along with a sample examples, comparison...
Animating SVGs in React with the Native Web Animations API (No Libraries Needed)
While React libraries like Framer Motion are amazing, sometimes you want fine-grained control over...
Real-World Use Cases for SVG Filters in Modern Web Development
SVG filters are one of the most underutilized tools in front-end development. While CSS filters get a...
The Ultimate Guide to SVG Icons in Angular: From Basic to Semantic
Working with SVG icons in Angular projects can be approached in several ways, each with distinct...
用 Inkscape 批次幫 SVG 檔文字轉外框
我的工作會遇到需要把 SVG 檔內含的文字轉外框，這可以透過開放原始碼的 Inkscape 處理，而且 Inkscape 還提供 CLI 介面，可以像是透過 Selenium 或是 Playwright...
Animating Large SVGs in React Without Crashing Mobile Browsers
Animating complex SVGs in React can easily destroy mobile performance if you’re not careful. This...
The Swiss Army Knife of Vector Graphics Scripting
Scalable vector graphics anyone? The Swiss Army Knife of Vector Graphics Scripting – Scriptographer...
SVG Path Editor – Draw and Edit SVGs Easily 🚀
SVG Path Editor – Draw and Edit SVGs Easily 🚀 SVGs are powerful for modern web design, but...