如何简单粗暴的做一个自己博客的SVG背景
由于 SVG 可以无限缩放而不失质量,它已成为创建精美图形、图标和logo的首选格式,能够在不同的设备和屏幕尺寸上无缝适应。现在很多网站的logo都是SVG格式,还有Microsoft的Office网页版图标也是SVG。在某些特定用途上,如创建清晰可缩放的图标、logo或插图时, SVG 背景图案比 JPEG 更具以下优势:
- 可缩放性:SVG 在缩放方面就像超级英雄。它们可以在不失去任何魅力的情况下调整大小。所以,无论你需要你的背景图案非常小还是巨大,SVG 都能满足你。而 JPEG 在拉伸过度时可能会有点像素化。
- 文件大小:SVG 是紧凑的大师。它们的文件大小往往较小,特别是对于简单的设计。这意味着你的网站加载速度更快,访客更满意。
- 透明度:SVG 完全支持透明度。你可以创建令人惊叹的背景图案,与页面上的其他元素无缝融合。不幸的是,JPEG 没有这种能力。
- 动画和交互性:SVG 喜欢热闹!通过一点 CSS 和 JavaScript 的魔法,你可以让你的 SVG 背景图案充满动画和交互性。就像在你的设计中有一个虚拟舞池。而 JPEG 在这个派对上更像是壁花,没有这些功能。
- 颜色控制:SVG 让你成为颜色的老板。你可以使用 CSS 轻松更改背景图案的颜色,使其与你的网站配色方案完美匹配。不幸的是,JPEG 没有给你这种程度的控制。
- 可访问性:SVG 非常注重包容性。通过在 SVG 代码中添加描述性文本,你可以使你的背景图案对屏幕阅读器和辅助技术可访问。不幸的是,JPEG 没有这种超能力。
偶尔会遇到一些朋友问我SVG的背景是怎么来,有没有什么办法他自己也做一个他的SVG背景,写这篇文章的原因也是从这里来的。下面来聊聊SVG,以及如何简单粗暴的做一个SVG的博客背景。
先说一下我的博客背景的这个SVG,来源于Hero Patterns( heropatterns.com )这个网站。这个网站提供几十个简单的SVG背景图案,可以无缝平铺在你网站的背景上。网站提供颜色和不透明度的调整按钮,你可以通过对颜色和不透明的调整,来匹配你网站的风格。
如果你觉得这些图案不能满足你的要求,那么我再提供一个网站,只需要你有自己的SVG图标,就可以随意组合,得到一个自己想要的SVG平铺的背景图案。就是这个叫 Patternico( patternico.com )提供了一个丰富的创意可定制 SVG 背景图案库。从几何形状到抽象设计,可以根据你的特定需求进行修改。如果你觉得这些图案不符合自己的要求,就可以自己通过素材网站下载或者是自己Illustrator设计好的图案导出SVG格式,素材网站下载的AI格式的图案或者图标,也可以通过Illustrator导出SVG,再导入这个简单的编辑器里,你可以用自己喜欢的颜色和效果来个性化图案。
对了,SVG还可以是动态,动手能力强的小伙伴也可以自己设计一些动态的SVG,可以去网上找找,看上去也挺多的,想上传一个上来,发现WordPress不支持。
Pnnk
这个黄黄的好像拿来做手机壁纸...好羡慕你们可以做自己想要的东西...我的工作没办法帮我完成任何想要的东西,气死
毛伊西格
@Pnnk 可以当作业余爱好学习一下,你可以的。
heilzz
svg就是很爽,矢量,体积小
段先森
确实粗暴,哈哈
毛伊西格
@段先森 🤪点几下就可以搞定,也不用自己设计
LOFI.ICU
看到最后,最后一句WordPress不支持给整不会了🙃
毛伊西格
@LOFI.ICU 可以以文件的形式放在服务器里,再调用就可以了。