iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 0 留言 1997 瀏覽

技術各種網站常用圖像格式基礎圖解 (JPG、PNG、GIF、SVG 和 WebP 等等)

如果要深入解釋這個領域，可能要撰寫 2-3 萬字才足夠，但新手如果希望簡單獲得一個基礎的觀念，這張圖解相信可以提供一個快速的辦識給您作為參考。主流格式的市場...

Mack Chan ‧ 2020-02-15

1 Like 0 留言 1418 瀏覽

鐵人賽 Modern Web DAY 26

鉄人28号FX 系列第 26 篇

技術鉄人28号FX　鉄人26号「路徑鳥」SVG <path> <textPath> <defs>

★ 地圖雷奧鎮市中心 ↓↓↓ 傳送卷軸，建議先向鉄人25号「圖形鹿」獲得幫助，此為雷奧鎮續文。顯示雷奧鎮街上位置圖：這簡直就像是一直合理存在著。雷奧鎮小...

letter liu ‧ 2019-10-11 ‧團隊好想工作室 v3.0

2 Like 1 留言 1285 瀏覽

鐵人賽 Modern Web DAY 25

鉄人28号FX 系列第 25 篇

技術鉄人28号FX　鉄人25号「圖形鹿」SVG <text> <tspan>

★ 地圖雷奧鎮市中心 ↓↓↓ 真不可思議～明明普通不過的街景，為何隱藏這麼多無法理解的事情。顯示雷奧鎮街上位置圖雷奧鎮小巷 [？？？]：小子。果然村長擔心...

letter liu ‧ 2019-10-10 ‧團隊好想工作室 v3.0

2 Like 0 留言 4645 瀏覽

技術 Svg - 進階功能介紹

上次介紹了基礎圖形的繪製，這次介紹一些其他的元素群組 <g> 是 Group 的意思，其子元素會繼承該元素的屬性，常用在 transform &l...

Ares ‧ 2019-07-23

2 Like 0 留言 1851 瀏覽

技術 Svg - 基礎圖形與樣式

SVG ( Scalable Vector Graphics ) 是 XML 的格式，可以用來繪製向量圖形，相較圖片來說，放大縮小時不會糊掉，適合使用在不需豐富...

Ares ‧ 2019-07-19

0 Like 0 留言 2886 瀏覽

鐵人賽 Modern Web DAY 19

CSS Secrets 導讀系列第 19 篇

技術 Secret 14: 簡單的圓餅圖 (SVG)

SVG讓許多圖像的工作變簡單，製作圓餅圖也不例外。然而與其用路徑畫圓餅圖，我們要用一個小技巧。先從一個圓形開始： <svg width="10...

yowlonglee ‧ 2018-11-03

0 Like 0 留言 1492 瀏覽

鐵人賽自我挑戰組 DAY 18

蛻變事實－UI設計師勇闖前端城系列第 18 篇

技術 [蛻變事實／D18] 設計師勇闖前端城－（學習記：CSS背景圖SVG檔換色）

最近切的版，圖都是SVG格式今天處理footer區塊才發現我手中沒有footer 區塊需要的白色Logo啊～～～！面對此問題我可以有二個做法：打開PSD原...

凱特麻麻桑 ‧ 2018-11-02

0 Like 0 留言 1921 瀏覽

鐵人賽 Modern Web DAY 15

CSS Secrets 導讀系列第 15 篇

技術 Secret 12: 截角效果 (inline SVG)

雖然 CSS gradient 的方法可以用，不過它的程式碼是冗長的，需求變更時要做多個地方調整，好在我們還有其他的方法，其中一種是用border-image配...

yowlonglee ‧ 2018-10-30

2 Like 0 留言 11050 瀏覽

鐵人賽 Modern Web DAY 16

前端「設計」聖光之路系列第 16 篇

技術 SVG 輸出注意事項

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。...

卡斯伯 ‧ 2018-10-30

5 Like 1 留言 7296 瀏覽

鐵人賽 Modern Web DAY 14

前端「設計」聖光之路系列第 14 篇

技術網頁圖片格式的運用

隨著裝置解析度越來越高，如果是以 1:1 的尺寸輸出圖示時，都會明顯地看到圖示邊緣出現鋸齒，這樣的情況下無疑是降低設計的品質，為了避免這樣問題，實作中通常會使...

卡斯伯 ‧ 2018-10-28

1 Like 0 留言 3461 瀏覽

鐵人賽其他技術 DAY 30

SVG 30 天 ~ 就要醬玩系列第 31 篇

技術 Day30+1 - SVG filter - feConvolveMatrix

之前有介紹過模糊的濾鏡 ( SVG 研究之路 (13) - filter - feGaussianBlur )，既然有模糊濾鏡，為什麼沒有銳利化的濾鏡呢？其實...

oxxo ‧ 2014-10-22

3 Like 0 留言 9885 瀏覽

鐵人賽其他技術 DAY 30

SVG 30 天 ~ 就要醬玩系列第 30 篇

技術 Day30 - SVG 完整教學 30+1 天

非常感謝 IT 邦幫忙舉辦鐵人賽，因為有了之前的文章，讓我學會了保哥寫的 GIT 和洧杰哥寫的 SASS，今年總算是鼓起勇氣來參賽了，30 天不長不短，但是對自...

oxxo ‧ 2014-10-22

1 Like 0 留言 3853 瀏覽

鐵人賽其他技術 DAY 29

SVG 30 天 ~ 就要醬玩系列第 29 篇

技術 Day29 - SVG filter - feDisplacementMap

在玩 photoshop 的時候，我時常會使用一個名為「移置」的特效，這個特效說難不難，可以參考我在 2008 年寫的的教學：photoshop：國旗飄揚皺折...

oxxo ‧ 2014-10-21

5 Like 2 留言 3944 瀏覽

鐵人賽開發技術 DAY 26

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 26 篇

技術 MIS2000Lab.的「HTML5 認證考試，從零開始」#26-- 先進圖形 / Canvas API

=============================================== 本系列文章已經集結出書 HTML5、CSS、JavaScript...

mis2000lab ‧ 2014-10-21

1 Like 0 留言 2501 瀏覽

鐵人賽其他技術 DAY 28

SVG 30 天 ~ 就要醬玩系列第 28 篇

技術 Day28 - SVG filter - feImage

feImage 是 SVG filter 裏頭最簡單的濾鏡，不過為什麼要用一篇文章專門介紹它呢？就是因為 feImage 可以幫助我們更實際的了解 filte...

oxxo ‧ 2014-10-20

1 Like 0 留言 3034 瀏覽

鐵人賽其他技術 DAY 27

SVG 30 天 ~ 就要醬玩系列第 27 篇

技術 Day27 - SVG filter - feComponentTransfer

feComponentTransfer 是針對圖像中每一個像素，利用公式的計算，進行亮度、對比...等調整，其實就有點類似 Photoshop 裏頭的「曲線」...

oxxo ‧ 2014-10-19

1 Like 0 留言 2490 瀏覽

鐵人賽其他技術 DAY 26

SVG 30 天 ~ 就要醬玩系列第 26 篇

技術 Day26 - SVG filter - feGaussianBlur

使用過 Photoshop 都知道，模糊就跟斯斯一樣多種，其中的一種就是「高斯模糊」，同樣的，在 illustrator 裏頭也有高斯模糊，因此 SVG 也就擁...

oxxo ‧ 2014-10-18

1 Like 0 留言 3306 瀏覽

鐵人賽其他技術 DAY 25

SVG 30 天 ~ 就要醬玩系列第 25 篇

技術 Day25 - SVG filter - feColorMatrix

feColorMatrix 顧名思義就是色彩矩陣的濾鏡，用一個矩陣的計算，將圖片的色彩重新計算後輸出，便可以達到各種不同的色彩變化效果，在此之前，要先介紹一下...

oxxo ‧ 2014-10-17

1 Like 0 留言 2938 瀏覽

鐵人賽其他技術 DAY 24

SVG 30 天 ~ 就要醬玩系列第 24 篇

技術 Day24 - 初探 SVG filter

前面二十幾篇的 SVG 文章已經涵蓋了 SVG 的基本用法和觀念，接下來的幾天，將會開始介紹 SVG 的濾鏡 ( filter )，也將開始進入 SVG 奧妙...

oxxo ‧ 2014-10-16

3 Like 2 留言 3925 瀏覽

鐵人賽其他技術 DAY 23

SVG 30 天 ~ 就要醬玩系列第 23 篇

技術 Day23 - SVG + CSS 製作 Material Design 進度條

這是一個利用 CSS 與 SVG 所做出來的進度條，仿照 Google Material Design 的設計風格設計，雖然 Google 有提供一系列的扁平...

oxxo ‧ 2014-10-15

1 Like 0 留言 4647 瀏覽

鐵人賽其他技術 DAY 22

SVG 30 天 ~ 就要醬玩系列第 22 篇

技術 Day22 - 寫 jquery 產生 SVG 圓餅圖

之前我們提過了 SVG pie chart 圓餅圖實作和控制 SVG 的注意事項，現在就要來將兩者結合，使用 jquery 來畫出圓餅圖，同時使用 js...

oxxo ‧ 2014-10-14

1 Like 0 留言 4952 瀏覽

鐵人賽其他技術 DAY 21

SVG 30 天 ~ 就要醬玩系列第 21 篇

技術 Day21 - 控制 SVG 的小小注意事項

上一篇已經出現了使用 jQuery 畫出 SVG 的內容，不過還是寫死的，如果要使用可以讀取 json 的方式，將要用到比較進階的手法，因此，在介紹 SVG...

oxxo ‧ 2014-10-13

2 Like 0 留言 4679 瀏覽

鐵人賽其他技術 DAY 20

SVG 30 天 ~ 就要醬玩系列第 20 篇

技術 Day20 - SVG pie chart 圓餅圖實作

在之前我所撰寫的 SVG path 的文章 SVG 研究之路 (5) - Path 進階篇當中，詳細介紹了關於 path 的 A 參數用法，回想一下，A 參...

oxxo ‧ 2014-10-12

1 Like 0 留言 4452 瀏覽

鐵人賽其他技術 DAY 19

SVG 30 天 ~ 就要醬玩系列第 19 篇

技術 Day19 - 深入理解 SVG SMIL Animation

上一篇應該已經大概明白 SVG 的動畫是怎麼一回事，但仍然有很多屬性和設定沒有解釋清楚，然而這些屬性和設定，才是 SVG 動畫的最精華所在，讓我們繼續看下去~...

oxxo ‧ 2014-10-11

1 Like 0 留言 3339 瀏覽

鐵人賽其他技術 DAY 18

SVG 30 天 ~ 就要醬玩系列第 18 篇

技術 Day18 - 初探 SVG SMIL Animation

SVG 的動畫元素是由 W3C Synchronized Multimedia (SYMM) Working Group 由 Synchronized Mul...

oxxo ‧ 2014-10-10

1 Like 0 留言 3478 瀏覽

鐵人賽其他技術 DAY 17

SVG 30 天 ~ 就要醬玩系列第 17 篇

技術 Day17 - SVG transform Matrix

前一篇介紹了 SVG tansform 的前四個基本方法：translate、scale、rotate 和 skew，其實這四個方法都是建構在 Matrix 這...

oxxo ‧ 2014-10-09

1 Like 0 留言 2900 瀏覽

鐵人賽其他技術 DAY 16

SVG 30 天 ~ 就要醬玩系列第 16 篇

技術 Day16 - SVG transform 基礎篇

在 CSS3 裏頭，我們常常使用到 transform 這個變形的效果，同樣的，對於 SVG 來說，transform 也是重要的變形屬性，與 CSS 一模一...

oxxo ‧ 2014-10-08

1 Like 1 留言 2549 瀏覽

鐵人賽其他技術 DAY 15

SVG 30 天 ~ 就要醬玩系列第 15 篇

技術 Day15 - 再談 SVG defs

在前面的 SVG 研究之路裡，不斷看到 defs 這個元素的身影，從顏色的填充、線段的圖案、濾鏡的定義...等許多的效果，都必須使用 defs 來定義，因此就直...

oxxo ‧ 2014-10-07

1 Like 0 留言 3007 瀏覽

鐵人賽其他技術 DAY 14

SVG 30 天 ~ 就要醬玩系列第 14 篇

技術 Day14 - SVG Clipping and Masking

使用過 Illustrator 的朋友應該都會知道，裏頭有一個重要的繪圖功能，就是剪裁和遮色片，這也是在圖形處理上頗為重要的兩個功能，而在 SVG 裏頭這兩個功...

oxxo ‧ 2014-10-06

1 Like 0 留言 5171 瀏覽

鐵人賽其他技術 DAY 13

SVG 30 天 ~ 就要醬玩系列第 13 篇

技術 Day13 - SVG text 文字

「文字」雖然字面上的解釋很簡單，但深入研究之後，發現 SVG 對於文字的設定，比我想像的複雜得多，但也因為有了這些我所不知道的設定和屬性，讓原本單純樸實的文字，...

oxxo ‧ 2014-10-05

技術 各種網站常用圖像格式基礎圖解 (JPG、PNG、GIF、SVG 和 WebP 等等)

技術 鉄人28号FX 鉄人26号「路徑鳥」SVG <path> <textPath> <defs>

技術 鉄人28号FX 鉄人25号「圖形鹿」SVG <text> <tspan>