这几年有不少背景图案制作工具，都可以在线上预览、定制图形细节，最终产生 CSS 和 SVG 格式，甚至在不用下载任何文件的情况下直接复制代码，加入网页就会获得非常好的效果，兼具品质和效能，也不会拖慢网页速度。

本文要推荐的「VISIWIG」是一个整合免费图标、背景图和纹理效果的线上产生器，特色是只需复制就能使用的图片工具，无论图标或背景都是使用 CSS 或 SVG 格式，也具有基本的自定义功能，像是调整颜色、尺寸大小，背景图则有放大缩小、旋转、粗细和色彩编辑选项，在编辑后即时在网页上预览效果。

VISIWIG 图标皆可免费使用，矢量图背景有 30 种免费选项（另外 70 种或更多需要付费购买），依照授权说明，VISIWIG 提供的素材允许使用于商业用途，无需标注出处。矢量图背景的特色是可以无限缩放，产生更为清晰的效果，导出为 SVG 文件很小，对于网页载入来说不会造成延迟问题。

VISIWIG使用教程

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

VISIWIG 提供的独立图标看起来都很简洁，数量还算完整，可以从右侧选项进行设置，包括图标颜色、尺寸大小、模式（复制 CSS、SVG 代码或下载 SVG格式文件），特色是所有图案都能通过点击快速将代码复制到剪贴板。

切换到「Patterns」背景图页面会看到大约 30 种免费背景，这些图案都能自定义，让它更符合使用者的需求，这些都是无接缝图案（seamless patterns），也就是只有一小部分但接续在一起就能重复显示。

进入背景图自定义功能，通过下方的选项进行细节调整，像是放大、缩小、翻转或设置图案的密度等等，利用拖拽下方调整按钮会即时呈现效果。

当然也能够直接设置图案颜色，包括前景和背景色。

最后切换到「Output」就会看到直接复制 SVG、CSS 代码选项，可以将看到的背景图素材代码复制到剪贴板，或是点击「Save SVG」将图片保存为 SVG 格式。