tag svg

標籤
貢獻53
81
06:37 AM · Oct 27 ,2025
andy-clarke 頭像 cosima-mielke 頭像 myriam-frisano 頭像 xlbd 頭像 adrian-bece 頭像 ilya 頭像 paul-scanlon 頭像 jzcreative 頭像 dongdianjun 頭像 refanbanzhang 頭像 dawanzi_6278b06ec111c 頭像 dirk-weber 頭像

@svg / 博客 RSS 訂閱

refanbanzhang 頭像

熱飯班長 - 最好的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

收藏 評論

assassin 頭像

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

收藏 評論

qzuser_juan26 頭像

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

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

前端 , svg

收藏 評論

alasolala 頭像

Alaso - SVG動畫從入門到實戰，提升你的網站表現力

在 SVG 中，如果我們想實現一個動畫效果，可以使用 CSS，JS，或者直接使用 SVG 中自帶的animate元素（SMIL）。 這裏我們主要探討SVG與CSS結合實現的一些常見動畫效果。 （下面要使用到的SVG基礎知識，在SVG從入門到圖標繪製和組件封裝 和 SVG中的Transform詳解---平移、旋轉和縮放中都有詳細的介紹，這裏就不重複了，有需要的朋友可以前往查看哦。 ） SVG + C

css3 , svg動畫 , 前端 , html5 , svg

收藏 評論

dawanzi_6278b06ec111c 頭像

大丸子 - 用Python插入SVG到PDF文件

將SVG（可縮放矢量圖形）文件插入到PDF（便攜式文檔格式）文件中不僅能夠保留SVG圖像的矢量特性，確保圖像在任何分辨率下都保持清晰，還能夠充分利用PDF格式在跨平台文檔分享方面的優勢，使得技術文檔、手冊、報告等內容更加豐富多樣且易於傳播。使用Python可以輕鬆實現SVG到PDF的插入。本文將介紹如何使用Python插入SVG文件到PDF文檔中。 用Python插入SVG到PDF頁面 用P

pdf導出 , python3.x , pdf , Python , svg

收藏 評論

jzcreative 頭像

計育韜 - 中國SVG開發者大會研討會在復旦大學召開，計育韜老師受邀致辭

近日，備受矚目的第二屆中國 SVG 開發者大會在上海市由 E2.COOL 黑科技 SVG 編輯器主持承辦並正式開幕。本次大會吸引了來自全國各地的 SVG 技術精英和頂尖團隊，共同探討融媒體交互技術的創新應用、版權保護與發展前景。大會期間，學術議程 SVG 創新生態與知識產權保護研討會於復旦大學成功舉行。 本次活動以主旨演講與圓桌論壇的形式，圍繞“SVG 創新生態與知識產權保護”主題進行了深入分析與

交互設計 , Css , svg動畫 , html5 , svg

收藏 評論

refanbanzhang 頭像

熱飯班長 - svg的使用方式

使用img加載 import dir from '/assets/icons-plus/dir.svg' img :src="dir" / 優點：使用簡單 缺點: 不能動態修改svg的樣式

react , vue.js , svg

收藏 評論

dawanzi_6278b06ec111c 頭像

大丸子 - 用Python代碼實現PPT演示文稿到圖片的轉換

PowerPoint演示文稿作為展示創意、分享知識和表達觀點的重要工具，被廣泛應用於教育、商務彙報及個人項目展示等領域。然而，面對不同的分享場景與接收者需求，有時需要我們將PPT內容以圖片形式保存與傳播。這樣能夠避免軟件兼容性的限制，確保信息接收者無需安裝特定軟件即可查看內容，還便於在網絡社交平台、博客、電子郵件中快速分享與嵌入。而用Python代碼可以高效地實現PowerPoint演示文稿到圖片

ppt , 圖片 , powerpoint , Python , svg

收藏 評論

daishuyunshuzhanqianduan 頭像

袋鼠雲數棧UED - 流程圖渲染方式：Canvas vs SVG

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 背景 我們產品中會有一些流程圖應用，例如審批中心的審批流程圖： 我們數棧產品內的流程圖，基本都是使用的 mxGraph 實現的，mxGraph 使用了SVG來渲染圖形。 流程圖組件庫除了 mxGraph，還有其他一些流行的庫，例如：Re

canvas , 前端 , svg

收藏 評論

jsoncode 頭像

jsoncode - svg實現漸變百分比組件

參考文檔： 張鑫旭大佬的博客：https://www.zhangxinxu.com/study/201710/colorful-time-count-d... 改造後的效果： 源碼：vue3 script lang="ts" setup 模式版本： template div class="config-progress" :style="`--size:${si

組件設計 , vue3 , Javascript , svg

收藏 評論

chai_huo 頭像

柴火 - SVG <pattern> 標籤的用法和應用場景

通過使用 pattern 標籤，可以在 SVG 圖像內部定義可重複使用的任意圖案。這些圖案可以通過 fill 屬性或 stroke 屬性進行引用。 使用場景 例如我們要在 svg 中繪製大量的圓點點，可以通過重複使用 circle 標籤來實現。 svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" circle cx=

前端 , svg

收藏 評論

xboxyan 頭像

XboxYan - 不一樣的SVG！SVG在CSS背景平鋪中的應用

歡迎關注我的公眾號：前端偵探 再次介紹一些你可能沒用過的SVG小技巧。 有時候會遇到一些完全相同的圖形，如果能用上 CSS背景平鋪，那就再合適不過了。舉個例子，有這樣一個按鈕 相比普通的按鈕，多個左右兩個小裝飾，如果是你，會怎樣實現呢？ 假設這個小圖標是a.svg，想了一下，應該有以下幾種方式 1.偽元素 剛好用上::before和::after，設置相同的背景就行了，示意如下 butto

css3 , Css , 前端 , svg

收藏 評論

dongdianjun 頭像

懂點君 - SVG排版公眾號文章『點擊同時顯示圖片與音樂播放』模板代碼

模板效果 點擊查看效果 模板代碼 section style="overflow: hidden;width: 100%;height: 100%;visibility: visible;" data-share="公眾號：懂點君" !-- 第二張圖片 -- svg width="100%" height="100%" style="visibility: visible;back

HTML , svg動畫 , svg

收藏 評論

andy-clarke 頭像

Andy Clarke - Smashing Animations Part 3: SMIL’s Not Dead Baby, SMIL’s Not Dead

The SMIL specification was introduced by the W3C in 1998 for synchronizing multimedia. This was long before CSS animations or JavaScript-based animation libraries were available. It was built into S

animation , Css , Design , svg

收藏 評論

andy-clarke 頭像

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

I explained recently how I use symbol, use, and CSS Media Queries to develop what I call adaptive SVGs. Symbols let us define an element once and then use it again and again, making SVG animations e

animation , Css , Design , svg

收藏 評論

ilya-pukhalski 頭像

Ilya Pukhalski - Rethinking Responsive SVG

If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do

Responsive Design , coding , Css , Javascript , svg

收藏 評論

dirk-weber 頭像

Dirk Weber - The Art Of SVG Filters And Why It Is Awesome

After almost 20 years of evolution, today’s web typography, with its high-density displays and support for OpenType features, is just a step away from the typographic quality of the offline world. B

Responsive Design , coding , Css , svg

收藏 評論

andy-clarke 頭像

Andy Clarke - Ambient Animations In Web Design: Practical Applications (Part 2)

First, a recap: Ambient animations are the kind of passive movements you might not notice at first. However, they bring a design to life in subtle ways. Elements might subtly transition between col

animation , Design , svg

收藏 評論

gionkunz 頭像

Gion Kunz - Chartist.js, An Open-Source Library For Responsive Charts

The list of charting libraries for the web is already quite long, and you might ask yourself why we would need to make it any longer. Whenever you need to develop an application’s dashboard, embed s

coding , Data Visualization , Javascript , svg

收藏 評論

heydon-pickering 頭像

Heydon Pickering - Creating Cel Animations With SVG

What if I told you there was an image format like GIF, but it worked with vectors? What if I said it was possible to reverse the direction of its animation? What if you could take one base image and

animation , sass , Techniques , coding , svg

收藏 評論

marius-sarca 頭像

Marius Sarca - Creating Elastic And Bounce Effects With Expressive Animator

This article has been kindly supported by our dear friends at Expressive, who create the next generation of intuitive design tools powered by Human Intelligence. Thank you! In the world of

animation , Tools , Design , svg

收藏 評論

dirk-weber 頭像

Dirk Weber - A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a dark wor

Techniques , Tools , Javascript , svg

收藏 評論

unakravets 頭像

Una Kravets - Web Image Effects Performance Showdown

As browsers constantly improve their graphical rendering abilities, the ability to truly design within them is becoming more of a reality. A few lines of code can now have quick and dramatic visual

coding , webgl , Responsive Images , Css , svg

收藏 評論

paul-scanlon 頭像

Paul Scanlon - Putting Gears In Motion: Animating Cars With HTML And SVG

Hello! And if you like HTML, you’ve come to the right place! I love HTML. As an old-school front-end developer, I think it’s a hugely underrated skill. I’ve been writing HTML since ~2005, and today

animation , HTML , svg

收藏 評論