svg

標籤

貢獻53

06:37 AM · Oct 27 ,2025

@andy-clarke

暱稱Andy Clarke

Last seen
@cosima-mielke

暱稱Cosima Mielke

Last seen
@myriam-frisano

暱稱Myriam Frisano

Last seen
@xlbd

暱稱xiaoluoboding

Last seen
@adrian-bece

暱稱Adrian Bece

Last seen
@ilya

暱稱Ilya Zayats

Last seen
@paul-scanlon

暱稱Paul Scanlon

Last seen
@jzcreative

暱稱計育韜

Last seen
@dongdianjun

暱稱懂點君

Last seen
@refanbanzhang

暱稱熱飯班長

Last seen
@dawanzi_6278b06ec111c

暱稱大丸子

Last seen
@dirk-weber

暱稱Dirk Weber

Last seen

@svg / 博客 RSS 訂閱

May 26 2014

Ilya Zayats - Love Generating SVG With JavaScript? Move It To The Server!

I hope that by now, in 2014, there is no need to explain why SVG is a blessing to developers who want to ensure that their graphics look sharp on all devices, especially with their huge diversity of

Techniques , Tools , coding , svg

收藏評論

Nov 17 2025

Paul Scanlon - How To Create Dynamic Donut Charts With TailwindCSS And React

CSS is amazing — I’m regularly surprised at how far it has come in the years I’ve been using it (~2005 – present). One such surprise came when I noticed this tweet by Shruti Balasa which demonstrate

react , Techniques , Css , svg

收藏評論

Oct 27 2025

xachary - 手把手使用 SVG + CSS 實現漸變進度環效果

效果在線Demo 軌道使用 svg 畫個軌道 svg viewBox="0 0 100 100" circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke="#333"/circle /svg 簡單的説，就是使用 circle 畫個圓。需要注意的是，軌道實際是 circle 的 stroke，所以目

css3 , Javascript , svg

收藏評論

Oct 27 2025

熱飯班長 - 最好的svg使用方案（個人覺得）

方案1：img 將svg作為img的src import icon from './xxx.svg' img :src="icon" 無法很好的自定義尺寸，圖片會模糊（使用了img後，會喪失svg的特性）無法指定顏色方案2：插件添加vite-svg-loader插件找了好幾個常見的插件，比如vite-plugin-svg-icons、vite-plugin-svg-loader、u

react , vue.js , vite , HTML , svg

收藏評論

Oct 27 2025

assassin_cike - SVG 瞭解下

1. SVG中後面的元素會覆蓋前面的元素 svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" !-- 第一層：紅色矩形 -- rect x="10" y="10" width="100" height="100" fill="red" / !-- 第二層：藍色矩形 -- rect x="50

svg

收藏評論

Oct 27 2025

juan26 - svg轉字體文件部分線條缺失

問題： ui給的svg是這樣的：上傳到iconmoon之後轉換出來的圖標是這樣的：可以看到中間的A字缺失了一部分解決過程：以為是A字識別不出來，於是在其他地方找了一個帶有A的svg，上傳到iconmoon查看轉換後的圖標是，A並沒有缺失，猜測是svg源碼的問題導致iconmmon轉換時有問題。查看沒問題的svg源碼如下：查看有問題的svg

前端 , svg

收藏評論

Oct 27 2025

鼓獅知識庫 - 用AI開發“支持SVG管理的多用户版原型設計軟件”，分享拆分AI開發任務技巧

本期內容會分享我是如何用AI開發多用户版的原型設計軟件。一開始我先講講這個原型設計軟件有哪些功能，方便你知道這個系統有哪些複雜的邏輯點，後面我會有針對性得講講，如何使用AI來開發這樣的帶有多重交互和複雜邏輯的軟件。只要你掌握了這個技巧，你也能用AI開發可以用於銷售的軟件來賺錢。這個原型設計軟件https://tools.gushiio.com/proto/ 主要功能分別是畫板管理，顏色管理，圖

php , ai開發 , aigc , 原型設計 , svg

收藏評論

Nov 17 2025

Andy Clarke - Ambient Animations In Web Design: Principles And Implementation (Part 1)

Unlike timeline-based animations, which tell stories across a sequence of events, or interaction animations that are triggered when someone touches something, ambient animations are the kind of pass

animation , Css , Design , svg

收藏評論

Nov 28 2025

忘憂N - 【交互式天氣儀表盤】項目帶你快速瞭解 SVG 知識

本文目標通過此項目來完成 SVG 的基礎學習完成此項目，會對 SVG 有個清晰的認識並能繪製出一些簡易及稍微複雜的圖案工具 SVG 在線編輯器 SVG 在線編譯器文檔 SVG 參考手冊 MDN 學習參考 SVG 基礎 SVG，可縮放矢量圖形（Scalable Vector Graphics），是一種用於描述二維圖形的 XML 標記語言。 SVG 常見屬性 SVG 不

vue.js , 知識 , 前端 , svg

收藏評論

Nov 17 2025

Myriam Frisano - Decoding The SVG path Element: Line Commands

In a previous article, we looked at some practical examples of how to code SVG by hand. In that guide, we covered the basics of the SVG elements rect, circle, ellipse, line, polyline, and polygon (a

Techniques , coding , svg

收藏評論

Nov 16 2025

Andy Clarke - Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties

SmashingConf Amsterdam 2026 SmashingConf Amsterdam 2026 How To Measure UX and Design Impact, 8h video + UX training SurveyJS: White-La

animation , Css , Design , svg

收藏評論

Sep 09 2015

Chris Youderian - A Guide To Building SVG Maps From Natural Earth Data

Interactive maps are a fantastic way to present geographic data to your visitors. Libraries like Google Maps and Open Street Maps are a popular choice to do this and they excel at visualizing street

Maps , coding , svg

收藏評論

Nov 05 2025

搬不要錢的磚 - Ionicons - Ionic 出品的免費開源、高性能圖標庫，適用於 web / APP / 桌面應用

Ionic Framework 內置的圖標庫，免費開源、數量多，性能還不錯，無論是開發還是設計，都是一個優質的資源。關於 Ionicons Ionicons 是一個完全開源的圖標集，是知名混合開發框架 Ionic Framework 內置的圖標庫，包含 1300 個為 Web / iOS / Android 和桌面應用程序專門定製的圖標。Ionic Framework 是一個跨平台的混合

ionic , iconfont , Css , svg

收藏評論

Nov 17 2025

Costa Alexoglou - Better Context Menus With Safe Triangles

You’ve no doubt wrestled with menus that have nested menus before. I can’t count how many times I’ve hovered over a menu item that reveals another list of menu items, then tried to hover over that n

ux , svg , ui

收藏評論

Dec 28 2015

Ilya Zayats - Generating SVG With React

React is one of today’s most popular ways to create a component-based UI. It helps to organize an application into small, human-digestible chunks. With its “re-render the whole world” approach, you

react , coding , Javascript , svg

收藏評論

Jul 26 2016

Michael Ngo - The Illusion Of Life: An SVG Animation Case Study

With flat design becoming the ever visible trend of 2016, it’s clear why there’s been a resurgence in SVG usage. The benefits are many: resolution-independence, cross-browser compatibility and acces

Tools , coding , svg

收藏評論

Nov 17 2025

Andy Clarke - Smashing Animations Part 4: Optimising SVGs

SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like Wacky Races, The Perils of Penelope Pitstop, and, of course, Yogi Bear. They inspired me to lovingly recreate

animation , Css , Design , svg

收藏評論

Dec 17 2025

Andy Clarke - Smashing Animations Part 7: Recreating Toon Text With CSS And SVG

After finishing a project that required me to learn everything I could about CSS and SVG animations, I started writing this series about Smashing Animations and “How Classic Cartoons Inspire Modern

Css , Design , svg

收藏評論

Feb 23 2022

劉悦的技術博客 - Logo小變動，心境大不同，SVG矢量動畫格式網站Logo圖片製作與實踐教程(Python3)

原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_207 曾幾何時，SVG(Scalable Vector Graphics)矢量動畫圖被坊間稱之為一種被瀏覽器詛咒的技術，只因為糟糕的硬件支持(IE)，和沒完沒了的兼容性調優(Safari)。但是在2022年的今天，一切都不一樣了，正所謂三十年河東，三十年河西，微軟所研發的採用Chromium內核作為IE替代者的Edge瀏覽器已經

svga , logo , svg動畫 , 前端 , svg

收藏評論

Jul 28 2015

Lea Verou - Designing A Flexible, Maintainable CSS Pie Chart With SVG

Pie charts, even in their simplest two-color form, have traditionally been anything but simple to create with web technologies, despite being incredibly common for information ranging from simple st

Techniques , coding , Css , svg

收藏評論

Nov 17 2025

Akshay Gupta - Mastering SVG Arcs

So, I love drawing birds with code. Inspired by my brother’s love for birdwatching, I admire the uniqueness of their feathers, colors, and sounds. But what I notice most is the way their bodies curv

coding , Design , svg

收藏評論

Oct 15 2014

Karsten Bruns - Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to matc

Vectors , Photoshop , Tutorials , mobile , Graphics , Icons , svg

收藏評論

Jun 03 2013

Estelle Weyl - How To Solve Adaptive Images In Responsive Web Design

Adaptive images are the current hot topic in conversations about adaptive and responsive Web design. Why? Because no one likes any of the solutions thus far. New elements and attributes are being di

Responsive Design , coding , Css , svg

收藏評論