现代 CSS

SVG

CSS vs SVG: 美化复选框和单选按钮

这是有关于CSS和SVG技术对比的系列文章第二篇,目的是通过示例解释两者的利弊,更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。在上一篇文章中,我们讨论了使用CSS和SVG创建带纹理的文本效果,并得到结论是:目前阶段,使用SVG比使用CSS做更方便,更强大。在这篇文章中,我们将处理自定义的复选框和单选按钮的效果。

CSS vs. SVG:图形文本的效果

这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较。因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题。因为它是自然图像。但从客观的角度来看,我们要考虑每个技术的利弊,找出何时何地使用CSS或SVG更好。在这篇文章中,我们将复习一些使用CSS或SVG创建图形文本的技术和相关影响。

SVG中的结构化、分组和引用元素

SVG有自己结构化文档的方式。通过某些SVG元素,我们可以在文档中定义、分组以及引用对象。这些元素使得元件重用变得简单,而且还保持了代码的简洁性和可读性。在这篇文章中我们将讲解这些元素,并指出它们之间的区别,以及每个元素各自的优势。

用CSS和SVG制作饼图

饼图,即使是最简单的只有两种颜色的形式,用Web技术创建也并不简单,尽管都是一些常见的信息内容,从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现,或是使用大型的JavaScript框架来设计更复杂的图表。尽管这个东西并不像它曾经看起来那么难以实现,但是也没有什么直接并且简单的方法。但是,现在已经有很多更好、更易于维护的方式来实现它。

SVG Sprite

Sprite(雪碧图)在Web运用中已不是新技术,但大部分同学都还停留在位图的Sprite运用,比如.png图的合成。而这种技术对于现在的Web页面而言并不完美,比如位图在Retina屏幕带来的图标不清晰等现像,是我们技术人员必须面对的一件事情。而今天要说的,就是如何避开使用位图制作Sprite,来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。

SVG滤镜的艺术以及它为什么这么棒

经过近20年的发展,如今的网页排版,以其高密度的显示以及OpenType功能的支持,离现实世界的印刷排版仅是一步之遥。但是平面设计还是有一个领域,我们还在不断地fall back到使用位图,而不是使用单纯的文本:字体显示,如说明性的、绚丽的、戏剧性的、俏皮的、试验性的或料想不到的艺术字母。

Art-Directing SVG图像viewBox属性

SVG的viewBox属性是SVG最强大的特性之一。掌握好这个属性可以让你的SVG技能更上一层楼。特别是考虑到几个主要的SVG sprite技术也是依赖这个属性来工作的。因为viewBox属性可以用来裁剪和扩展SVG画布,它可以用于art-directing的SVG——使用它来裁剪SVG中你想要展示的区域。在这篇文章中,我想要就我们如何使用它来提一些建议,帮助你节省一些时间来做它,然后展示viewBox属性在CSS中的重要性,希望本文能够成为一个实际案例,能帮助推动这个旧的SVGWG提案的前进。

SVG画布,坐标系统,视窗

当你在屏幕上看SVG图像时,你是通过SVG视窗来看到画布的,所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念,它们之间的关系很容易混淆,导致有时会有预料之外的结果。你只有弄明白了它们之间的关系,才知道如何去控制它们。

SVG基础——填充和描边

过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识。首先,我展示了如何在HTML中嵌入SVG,接着讲解了如何创建SVG预定义的基础图形。为了让创建的图形显示出来,我在这两篇文章中都使用了填充和描边属性。今天我想要详细讲讲填充和描边以及它们的一些相关的属性。

SVG基础——如何创建简单的图形和线条

上周我开始了SVG的系列探讨,并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示,所以我创建了一个绿色的矩形。创建矩形的代码并不难理解,我并不打算详细讲解,所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形,但是我觉得我还是需要把它们再过一遍,因为我之前理解得也不够全面,所以再复习一遍也可以帮助我更好地理解。

页面

返回顶部