coreldraw矢量图形_网络的矢量图形

coreldraw矢量图形

When working on the web, there are two types of image formats that you can use:

在网络上工作时，可以使用两种类型的图像格式：

1. Raster Graphics: They are made up of pixels. The more pixels you have the higher the resolution you get.
   栅格图形：它们由像素组成。 像素越多，分辨率越高。
2. Vector Graphics: They use mathematical equations to create a two dimensional image. The graphics data is described by mathematical formula.
   矢量图形：他们使用数学方程式创建二维图像。 图形数据由数学公式描述。

This article will look at vector graphics and how to work with them using JavaScript.

本文将研究矢量图形以及如何使用JavaScript进行处理。

Vector graphics can be drawn by writing code to create them. Programs such as Inkscape and Illustrator also use them in their default formats.

矢量图形可以通过编写代码来创建。 Inkscape和Illustrator等程序也以其默认格式使用它们。

Take for example the map of Africa shown above. It is a composite shape made up of individual paths that each represents a country. With this knowledge, we can apply a transformation to the individual countries to any size. Provided we do the transformations uniformly, we can size or resize the image without distortion.

以上面显示的非洲地图为例。 它是由代表一个国家的各个路径组成的复合形状。 有了这些知识，我们可以对各个国家进行任意规模的转换。 只要我们统一进行变换，就可以调整图像的大小或调整大小而不会失真。

SVG规范 (The SVG Specification)

SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.

SVG是一种用于描述XML中的矢量图形的语言。 SVG是W3C规范，可以很好地与HTML，CSS和JavaScript一起使用。

Below is a basic skeleton of an SVG document. xlmns specifies the namespace for the document.

以下是SVG文档的基本框架。 xlmns指定文档的名称空间。

<svg xmlns=”http://www.w3.org/2000/svg"> 
</svg>

To draw a circle, we specify the properties of the circle in the document. So our document becomes:

要绘制圆，我们在文档中指定圆的属性。 因此我们的文档变为：

<svg xmlns=”http://www.w3.org/2000/svg"> 
 <circle cx=”40" cy=”40" r=”30" stroke=”#000" stroke-width=”1" fill=”#FFF” />
</svg>

Saving the above in a circle.svg document and viewing in a browser will draw the circle shown below:

将以上内容保存在circle.svg文档中并在浏览器中查看，将绘制出如下所示的圆圈：

Drawn Circle

画圆

SVG的优势 (SVG Advantages)

分辨率独立 (Resolution Independence)

Vector Graphics are Resolution Independent

矢量图形与分辨率无关

Scalable Vector Graphics (SVG) do not lose their resolution regardless of how they are resized.

不管缩放大小如何，可缩放矢量图形(SVG)都不会丢失其分辨率。

互动性 (Interactivity)

You can add hyperlinks and animation to SVG by styling and scripting. SVG has a navigable DOM which allows for the creation of interactive elements.

您可以通过样式和脚本将超链接和动画添加到SVG。 SVG具有可导航的DOM，该DOM允许创建交互式元素。

SEO友好 (SEO Friendly)

SVG is made up of XML text files. As a result, you can add keyword descriptions and links making content more recognisable for search engines.

SVG由XML文本文件组成。 因此，您可以添加关键字描述和链接，使搜索引擎更容易识别内容。

将SVG添加到您的网页 (Adding SVG to Your Web Pages)

使用图像标签 (Using the Image Tag)

An SVG document can be embedded in the image tag like a regular image in HTML. An example is shown below:

SVG文档可以像HTML中的常规图像一样嵌入到图像标签中。 一个例子如下所示：

<img src=”circle.svg” alt=”A simple circle” width=”100" height=”100" />

The disadvantage of this method is that the SVG will not be interactive.

此方法的缺点是SVG无法交互。

使用对象标签 (Using the Object Tag)

This is the best option if you intend to make the SVG interactive. The code to do so is shown below:

如果您打算使SVG具有交互性，则这是最佳选择。 这样做的代码如下所示：

<object type=”image/svg+xml” data=”circle.svg”></object>

使用内联SVG (Using inline SVG)

In this method, the code to generate the svg is placed between the body tags of the web pages.

在此方法中，将生成svg的代码放在网页的正文标签之间。

浏览器采用 (Browser Adoption)

Browser Support for SVG

SVG的浏览器支持

On the Can I Use website, most modern browsers have great support for SVG with the exception of Internet Explorer.

在“ 我可以使用”网站上，除Internet Explorer之外，大多数现代浏览器都对SVG提供了很好的支持。

用于SVGJavaScript工具 (JavaScript Tools for Working with SVG)

拉斐尔 (RaphaelJS)

RaphaelJS is a JavaScript library that allows you to work with vector graphics using JavaScript. It acts like an interface for creating SVG without having to write code in SVG.

RaphaelJS是一个JavaScript库，允许您使用JavaScript处理矢量图。 它就像创建SVG的界面一样，而无需在SVG中编写代码。

Think of it like jQuery. Without a wrapper like jQuery providing a layer of abstraction for JavaScript, you would have to write raw JavaScript to do anything on the web. If you think of how tedious writing JavaScript is and multiply that by 10, you will have an idea of the difficulty of SVG.

像jQuery一样思考它。 如果没有像jQuery这样的包装器为JavaScript提供抽象层，则您必须编写原始JavaScript才能在网络上进行任何操作。 如果您想到编写JavaScript是多么繁琐的操作并将其乘以10，您将了解SVG的难处。

RaphaelJS is a vector graphics library which is used to draw objects in the browser. It enables SVG support for IE8 and below.

RaphaelJS是一个矢量图形库，用于在浏览器中绘制对象。 它启用了对IE8及以下版本的SVG支持。

正义规 (JustGage)

JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on RaphaelJS library for vector drawing, so it’s completely resolution independent and self-adjusting.

JustGage是一个方便JavaScript插件，用于生成和动画漂亮且干净的量规。 它基于RaphaelJS库进行矢量绘图，因此它是完全独立于分辨率和可自我调整的。

Oh yes, since it’s pure SVG, it works in almost any browser -IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

哦，是的，由于它是纯SVG，因此几乎可以在任何浏览器中使用-IE6 +，Chrome，Firefox，Safari，Opera，Android等。

Snap.svg (Snap.svg)

Snap.svg was developed by the creator of the RaphaelJS library. Unlike RaphaelJS which supports IE8 and below, Snap.svg was designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.

Snap.svg由RaphaelJS库的创建者开发。 与支持IE8及更低版本的RaphaelJS不同，Snap.svg是为现代浏览器设计的，因此支持最新的SVG功能，例如遮罩，剪切，图案，完整渐变，分组等。

D3.js (D3.js)

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3.js是一个JavaScript库，用于根据数据处理文档。 D3 帮助您使用HTML，SVG和CSS使数据栩栩如生。 D3对Web标准的强调为您提供了现代浏览器的全部功能，而又不会使自己陷入专有框架，而是结合了强大的可视化组件和数据驱动的DOM操作方法。

结论 (Conclusion)

In the world of front end web development, there are a plethora of tools that are used to create interactive web applications. This tools involve working with HTML5, CSS3, SVG and WebGL.

在前端Web开发的世界中，有大量用于创建交互式Web应用程序的工具。 该工具涉及使用HTML5，CSS3，SVG和WebGL。

The main advantage of SVG is that it allows you create graphics without the loss of resolution when they are resized. This might not seem like much to you but in a world of responsive design, it represents a big opportunity.

SVG的主要优点是，它使您可以在调整图形大小时创建图形而不会降低分辨率。 在您看来，这似乎并不多，但在一个响应式设计的世界中，它代表了一个巨大的机会。

普通英语JavaScript (JavaScript In Plain English)

Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!

您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！

翻译自: https://medium.com/javascript-in-plain-english/vector-graphics-for-the-web-cdea7406aca2

coreldraw矢量图形