收藏这个网站，免费图标、背景图和纹理应有尽有！

这几不少背景图案制作具，都可以线预览、客制化图形细节，终产 CSS  SVG 格式，甚至不用下载任何文件的况下直接复制程序码，加入网页就会获得非常好的效果，兼具质效能，也不会拖慢网页速度。例如之的 Hero Patterns 速产重复图案 CSS 背景：

本文推荐的「VISIWIG」一整合免费图标、背景图纹理效果的线器，特色只需复制、贴就能取用的图片具，无论图标或背景都使用 CSS 或 SVG 格式，也具基本的自义功能，调整颜色、尺寸小，背景图则缩小、旋转、粗细色彩编辑选项，编辑后实时网页预览效果。

VISIWIG 图标部分皆可免费使用，量图背景有 30 免费选项（另 70 或更多需要付费买），依照授权说明，VISIWIG 提供素材允许使用于商业用途，需标示出处。量图背景特色是可以限缩放，生更为晰效，下载为 SVG 档案很小，于网页加载来说不会造成延迟问题。

VISIWIG

网站链接：https://www.visiwig.com/

使用教学

开启 VISIWIG 网站首页会看到三个主要项目：免费图标、背景图和纹理效，如有需要这三设计相关素材，都可以到网站找找。

VISIWIG 提供独立图标看起来都很简洁，数量算完，可以从右侧选项进设定，括图标颜色、尺寸大小、模（复制 CSS、SVG 程序代码或下载 SVG 文件），特色是所有图案都能选快速将程序代码复制到剪贴板。

切换到「Patterns」背景图页会看到大约 30 免费背景，这些图案都能自定义，让它更符合使用者需求，这些都是接缝图案（seamless patterns），也是有小部分连接在起能复显示。

进入背景图自定义功能，透过下选项进细节调，像是放大、缩小、翻转或设定图案密度等等，利用拖曳下调杆会实时呈现效。

然也能够接设定图案颜色，括前景和背景色。

最后切换到「Output」会看到接复制 SVG、CSS 程序代码选项，可以将看到背景图素材程序代码复制到剪贴簿，或是选「Save SVG」将图片保存为 SVG 格。

值试三个理由：

• 整合免费图标、背景图纹理效果，线自义直接复制使用
• 图标和背景皆可细节进调，实时预览改效
• 快速复制 SVG、CSS 程序代码，或将素材下载为 SVG 格式