
在接下来的文章中,我们将学习如何在HTML5中绘制SVG标志。在我们开始阅读文章之前,让我们先讨论一些关于SVG的事情。可缩放矢量图形(SVG)是一种使用矢量数据的图像格式。与其他格式不同,SVG不使用独特的像素来构建图像,而是使用矢量数据。
使用它最好的一点是,使用SVG可以制作适应任何分辨率的图片,这使得它们在网页设计和其他许多应用中非常理想。
让我们来看一个简单的例子,以便更好地理解SVG
Example
的中文翻译为:示例
当脚本被执行时,它将生成一个输出,其中包含在上述脚本中使用给定的尺寸在网页上绘制的一个SVG圆。
立即学习“前端免费学习笔记(深入)”;
什么是SVG
使用SVG(一种标记语言)来描述二维矢量图形。这是一种基于文本的技术,可以与CSS、DOM、JavaScript和SMIL等其他技术一起使用,以描述任意大小的图像。
SVG格式的矢量图片,例如,可以在不失去质量的情况下进行缩放。与像JPEG和PNG这样的位图图片不同,它们也可以在不需要图形编辑器的情况下进行本地化。
以下是在HTML5中绘制SVG标志的示例
Example 1
的中文翻译为:示例 1
在下面的例子中,我们正在网页上创建一个SVG标志。
When the script gets executed, it will generate an output consisting of an ellipse drawn with a linear gradient with the text "TUTORIALSPOINT", which acts as a logo on the webpage.
Example 2
的中文翻译为:示例2
考虑以下示例,我们正在网页上创建SVG徽标
FOLLOW TRAFFIC SIGNALS
当上述脚本运行时,它将产生一个输出,其中包含使用上述脚本中给定的测量值在网页上绘制的交通信号灯,它充当一个标志。
Example 3
让我们来看另一个例子,在网页上创建一个SVG标志。
HTML5 SVG logo
运行上述脚本后,输出窗口将弹出,显示在网页上使用上述脚本中提到的测量值绘制的带有线性渐变的SVG徽标。











