南宁高端网站建设:什么是可缩放向量图形?-慕枫南宁网络公司

新闻详情

南宁高端网站建设:什么是可缩放向量图形?

什么是可缩放向量图形?

南宁高端网站建设如果我们需要了解所有关于它的技术,我们谈论的是一种基于XML的语言,它的主要目的是定义和启用基于向量的图形,这些图形将在网上显示。使用ScalableVectorGraphics创建的图像与大多数常规图像有很大的不同,因为它们可以安全地调整大小,而不必担心任何质量的损失。这种质量还使它们非常容易动画或修改,使它们完全兼容HTML、DOM或XSLT。

SVG图像与其他图像的区别在于,它们可以使用几乎任何类型的文本编辑器创建,并且可以几乎相同的方式进行修改。放大和缩小通常会完全破坏图像,但是如果它是使用SVG创建的,这从来不是一个问题,也不是搜索它的问题。这些图像可以安全地压缩和脚本,质量将保持不变。您可以在任何您想要的解决方案中打印出来,而且由于这是一个开放标准,因此在这方面也不应该有任何重大问题。

另一方面,这些图像往往比其他类型的图像更大,更耗费内存。这主要是因为与其他图像上的格式相比,它们的格式大小要求要高得多。这使得尺寸在某些情况下成为一个问题,特别是对于非常小的图像,但在大多数情况下,这是一个可以接受的权衡。

如何使用可伸缩矢量图形?

SCV或ScalableVectorGraphics可以使用大量不同的方法。首先,您可以使用它绘制任意数量的形状,这些形状可以通过各种效果得到改进。我们没有时间讨论每一个细节,但基本知识现在应该已经足够了。

建议:免费SVG商业图标

图纸

首先,常见的形状包括圆、椭圆、矩形、直线、路径等。我们要检查每一个,从圆圈开始。

圆<圆>

主要元素是<圆形>,其属性分别为“Cx”和“Cy”作为x和y轴上的坐标,“r”是圆半径的长度。CX和Cy的默认值为0。

比方说,你需要一个简单的图像,就像一个带红色边缘的绿色圆圈。在大多数其他格式中,实际的尺寸很重要,因为它们会影响文件的大小,但是对于SVG图像,图像的实际大小不起那么重要的作用。您可以使用SVG“绘制”这个圆圈,它看起来如下所示。

例如,没有不透明的圆的编码如下所示:南宁高端网站建设

<html>
<title>Simple SVG Circle element</title>
<body>
<svg width="1000" height="1000">
<g>
<circle cx="200" cy="200" r="100" stroke="green" stroke-width="2" fill="rgb(133,22,133)"></circle>
</g>
</svg>
</body>
</html>

南宁高端网站建设

最终的结果可以在合适的网页浏览器中看到。但是,如果目标是一个不透明的圆圈,那么这个圆圈的编程方式就会略有不同:

<html>
<title>Simple SVG Circle element</title>
<body>
<svg width="1000" height="1000">
<g>
<circle cx="200" cy="200" r="10"
style="fill:rgb(133,22,133);stroke-width:2;
stroke:rgb(0,128,0);stroke-opacity:0.2;opacity:0.2"> </circle>
</g>
</svg>
</body>
</html>

有很多东西可以代替“圆”元素。您可以使用SVG来绘制几乎所有的基本图形,甚至可以自己创建一些东西。首先,您可以选择一个矩形,在这种情况下,命令应该是“rect”。除此之外,还有“椭圆”,如果你脑海中的图像是椭圆的话。你也可以画线,开放和封闭的形状,甚至多边形和路径。我们将在本教程的第二部分中详细介绍所有这些内容。就目前而言,只需说有其他形式可用,但越来越复杂和要求实现。

由于SVG是一个基于文本的系统,当然,文本元素可以结合在一起,并且具有很高的启动效率。这不仅包括常规文本,还包括一些你也可以完成的功能,比如旋转,多行,甚至超链接。用你想要的方式来完成其中的一些事情会变得更加棘手,但这是绝对可以做到的。

如果你喜欢实验你的数字的轮廓,你会很高兴听到,笔画也可以修改,并以多种不同的方式。首先,谁说轮廓必须是一条连续的单线?为什么不是一系列的点,或几条线或诸如此类的东西?好吧,现在可以了,只要你知道怎么做。

如果您需要标识和标记一些创建,ScalableVectorGraphics允许一个过滤器函数,在其中您可以插入唯一的ID元素,以方便更容易的搜索,并使您的创作与众不同。幸运的是,有各种各样的过滤器可供您使用,包括fe复合材料、feFloor、fephology等。这个列表还在继续,我们根本没有时间列出上面的每一个项目。

椭圆<椭圆>

圆的属性和椭圆的属性的主要区别是后者有一个额外的元素。有Cx和Cy,与圆相同,但不是单个半径,而是rx和ry,每个都代表半径,但在不同的轴上。否则,它的工作方式与之大同小异。如果你想要的话,它也会有不透明度,而且它的模式和圆圈的模式几乎是一样的。

矩形<RECT>

为了绘制一个矩形,您需要x和y轴的数据,以及矩形的高度和宽度。最后,有风格和阶级处理整个内联的事情。另外,如果你不喜欢矩形上的锐角,并且想把它们围起来,你还需要另外两个参数,RX和Ry。

它的语法如下所示:

<rect>
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
rx="length"
ry="length"
style="style information"
class="style class"
</rect>

这只是语法,因为一个实际的例子将占用太多的空间,同时提供相对较少的信息作为交换,在例子的顶部与圆圈。只有属性不同。

线<行>

现在,当涉及到线条时,它们要简单得多,至少它们本身是如此。您所需要的只是开头和结尾的坐标,其中一个是x1和y1,另一个是x2和y2。语法应该如下所示:

<line>
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
</line>

一个非不透明行的实际示例如下所示:

<html>
<title>Simple SVG Line element</title>
<body>
<svg width="1000" height="1000">
<g>
<line x1="50" y1="50" x2="200" y2="200"
stroke="green" stroke-width="2" fill="rgb(233,22,233)"></line>
</g>
</svg>
</body>
</html>

南宁高端网站建设

在浏览器上,这相当于从左上角到右下角的直线。您可以在</line>之前添加合适的元素,从而使其不透明。

Polyline<Polyline>

现在,除了<Polyline>元素之外,如果您想要绘制一系列不形成封闭图形的线条,则需要对所有需要的点进行坐标才能生成图形。本质上,你是连接点和这些点作为坐标。该行分别从“x”和“y”值开始,然后按照键入它们的顺序移动到您确定的每个连续点。是的,它们也可以是不透明的。

多边形<多边形>

如果您想保持整洁,并将您的一系列行带到它们曾经开始的位置,那么您必须使用<polygon>元素。本质上,它的工作方式与Polyline几乎相同,但这一次主元素是不同的,这条线在您输入的最后一点之后会自动返回到原来的坐标。否则,它工作得很好:您可以输入任意多个点,SVG将按照您设置的顺序进行操作,您甚至可以添加填充颜色和不透明度。

路径<路径>

到目前为止,这个元素是最难确定的元素,主要是因为它连接直线而不是单个点。您还可以比大多数人更多的方式修改它,因此也有更多的属性需要考虑。最简单的路径仅由表示路径数据的“d”组成,但是可以在混合中添加各种命令。例如,“m(或M)-moveve”表示一个命令,该命令将路径从一个点移动到另一个点。关于这些命令要记住的另一件事是,如果它们是大写的还是不大写的,就会有区别。例如,大写M意味着找到绝对路径,而小写m则命令计算机定位相对路径。

除此之外,还有一些命令可以使您创建到某个点的线条,甚至可以指定它们是垂直的还是水平的。如果你喜欢曲线,也有一个订单。您甚至可以指定您想要一条光滑的曲线,或者叫做二次Bezier曲线。除此之外,还有创建椭圆路径或关闭现有路径的命令。在你问之前,是的,这个额外的踢也可以增加不透明度。这还不是全部!

文本

您甚至可以添加文本,无论是作为一个独立的或作为描述的图形,您画。文本被视为另一个图像,因此在这方面,<text>元素不是可选的。除了有关文本的实际数据外,语法应该如下所示:

<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing"
</text>

简而言之,“x”和“y”是符号的坐标,当然,每个轴的坐标都是这样。“dx”和“dy”表示沿着各自的轴移动,而“TextLength”正是它所表示的。或者,您可以将文本的部分或整个部分旋转,就好像它是一行一样,并分别使用“旋转”和“文本调整”命令对文本进行调整。

例如,如果您想要写一条消息或类似的东西,下面是您可能要做的事情。

<html>
<title>Simple SVG Text element</title>
<body>
<svg width="1000" height="1000">
<g>
<text x="50" y="21" >This is a text element! </text>
</g>
</svg>
</body>
</html>

你能猜到这个消息在浏览器上会是什么样子吗?我们会给你省点麻烦的。它说:“这是一个文本元素!”当然,字母可以设置为不同的大小,旋转或您可以改变他们的颜色。多行文本和不同字体也可以通过控制,如“字体重量”或“字体系列”。至于超链接,您所需要做的就是添加所需的网页作为另一个文本,它将作为一个超链接到任何您选择的网页。

本质上,两者之间的主要区别是处理不透明度的单行文本,但是如果您查看浏览器中显示的图像,效果就大不相同了。就连填充物看起来也不一样。

在做这件事的时候,有几件事要记住。例如,<svg>标志着图片的开始,</svg>表示结束。这就是计算机如何区别于其他文本的方法。从那时起,您可以简单地将其嵌入到任何类型的XML文件中,只要位置和条件合适,它就可以工作。前两个参数是宽度和高度,这些参数指的是实际图像。因此,这些参数的数字越大,图像就越宽或越高。接下来,有一个“循环”元素,它意味着我们要画的是一个圆。如果是另一个数字,这一因素将反映这一点。接下来是CX、Cy和r元素。第一个和第二个代表图形中心的位置,在这种情况下是一个圆,而“r”是半径。

“笔画”和“笔画宽度”元素用于大纲;一个是大纲的颜色,另一个表示该行的宽度。“填充”代表图形的填充颜色。所以,如果你想要一个有黑色轮廓的绿色圆圈,笔画必须是黑色的,填充绿色。完成后,一个简单的</svg>标记将向计算机发出信号。虽然这看起来不太像,但对于任何大小、颜色和轮廓的圆圈,这个过程都是一样的,并且不留下任何参数被放大、输出或重新缩放图像破坏。另一方面,即使是这样画一个最小的圆圈,在内存空间和绘制它所需的工作方面也是相对苛刻的。

如果您想凝视您的手工作品,只需使用Chrome或Firefox..你甚至不需要插件之类的东西。然而,并不是每个浏览器在这方面都是一样的。当然,如果你坚持使用谷歌Chrome,Mozilla Firefox或Opera的东西应该是甜蜜的,但如果你有自虐倾向,喜欢IE或类似的东西,你将需要ActiveX控件或类似的东西。

为什么我需要SVG?

当然,所有这一切在一开始看起来不太像,但这是因为你没有看到更大的前景。SVG可以用来创建任何东西,从加载页面到演示游戏。唯一真正的限制是你的想象力。你需要做一个对话框吗?它基本上是一个带有文本和交互功能的矩形。还有一些颜色。你需要创建一个全新的图标或标志?您可以这样做,简单地连接点,然后缩放图像到您需要的大小。如果你试图设计一些微小的东西,你将很难找到正确的方法,因为一旦它被缩小,就很难再放大它而不会对图像的质量产生影响。

图表基本上是沿着x和y轴的虚线连接点-听起来很熟悉吗?你可以用任何你想要的方式来修饰它!甚至像“呆板”或“滚动”这样的效果现在也在你的范围之内。从互动游戏到在线广告,几乎没有什么是你无法使用SVG和一点创造力的地方。它所需要的只是练习和一点坚韧不拔。诚然,您可以通过其他方法实现这一点,但是很少有能与SVG的多功能性和可用性相匹配的。

底线

还有其他的事情,如模式,梯度,链接和互动性,但它们都将在适当的时候收到他们的报道。到目前为止,我们已经定义了可伸缩向量图形(ScalableVectorGraphics)的总体轮廓,并提供了一个示例来说明使用它是多么容易,当然,如果情况需要的话,它可以很容易地嵌入到几乎任何类型的XML文件中。同样,这可能是也可能不是最有效的绘制图像的方法,因为文件大小存在问题。

然而,可缩放向量图形并不是没有它的公平份额的有用的特性。可以说,最重要的是,使用这种语言创建的任何和所有图像都完全不受质量损失的影响,至少当涉及到人们对这类文件所做的大多数常规操作时。它们被压缩,打印,缩放和重新缩放,放大和输出…。当涉及到文件完整性时,大多数其他格式的鲁棒性往往要差得多,但由于这一特定格式是基于文本的,所以可能出错的东西不多。

即使如此,这并不是任何人都可以简单地从入门中拿起并开始使用的东西。即使是有编程经验的人也不能简单地开始使用他们完全不熟悉的工具和方法。考虑到这一点,可伸缩矢量图形需要一些培训,而且需要一些习惯,但一旦这种情况消失了,任何东西都无法阻止正在萌芽的程序员绘制他们想要的任何数字、形状和大小。天空是这里的极限,所以你要小心。


联系电话 400-6065-301

微信咨询 寒总监