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...
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...
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...
Svg Animations Done Easy
Ever heard of SVG? For the past year, I have been hobbying around using the new CSS feature to...
Reusing SVG Icons for Faster Pages
A lesser-known SVG feature can improve your website's performance.
How SVG Became the Standard Icon Format
Every app, be it mobile or web, is designed for multiple types of devices nowadays. Every component...
Cross Stitch shadow | CPC
Check out this Pen I made!
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...
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...
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...
Codia AI VectorMagic: Transforming Pixel Images to Full-Color Vector Graphics
1. Introduction In the world of digital design, the ability to convert pixel-based images...
🎨 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 -...
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...
Icons gem for Phlex
Introduction When it comes to building sleek, interactive UIs, having access to a robust...
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...
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...
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...
用 Inkscape 批次幫 SVG 檔文字轉外框
我的工作會遇到需要把 SVG 檔內含的文字轉外框，這可以透過開放原始碼的 Inkscape 處理，而且 Inkscape 還提供 CLI 介面，可以像是透過 Selenium 或是 Playwright...
Let’s Make Fire from an SVG
The “sale” refers to our savings on file size Let’s make a realistic fire effect from an...
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...
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...
🎥 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...
Iconoir: The Ultimate Icon Library for Modern Developers
Quick Summary: 📝 Iconoir is an open-source icon library offering over 1600 unique SVG...
Wait, no. THIS is how to make an SVG fire effect
I wrote an article explaining how to achieve a fire effect and it got somewhat… complex. Any time...
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...
Rocket SVG Cursor
SVG implementation of a cool cursor canvas widget, edited to be a rocket
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....
Increase your data visualization using Iconadda’s free graphic assets
BY https://www.iconadda.com , An important aspect of modern design is data visualization, and the...
The Swiss Army Knife of Vector Graphics Scripting
Scalable vector graphics anyone? The Swiss Army Knife of Vector Graphics Scripting – Scriptographer...
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...