Scalable Vector Graphics

format_list_bulleted Contenido keyboard_arrow_down

ImprimirCitar

Static image generated from an example SVG. The original file requires a browser with native support or plugin.

The scalable vector graphics or resizable vector graphics (from English: Scalable Vector Graphics ( SVG) is a format for two-dimensional vector graphics, both static and animated, in the extensible markup language format XML (Extensible Markup Language), that is, it is composed by code and whose specification is an open standard developed by the W3C since 1999. Unlike those graphics encoded in webP, JPG, PNG, or TIFF (Rasters), SVGs can be interactive and dynamic and this is because they are not composed of bitmaps, but are composed of vectors, which are mathematical instructions that are given to the browser or editing programs of these vector graphics, to scale them infinitely and without losing resolution or quality in the graphic.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, encrypted and compressed. Like XML files, SVG images can be created and edited with any text editor or commonly code editor, as well as drawing software.

SVG is a language used to draw and represent graphics, images and logos, that is, they are graphics that can be manipulated with CSS and JavaScript. These graphics were created so that they can be rendered on the web and in browsers. Furthermore, this markup language became a W3C Recommendation in September 2001, so it has already been included natively in the W3C Amaya web browser. Mozilla Firefox versions 1.5 and later support graphics made with SVG, as does the Opera browser, which since version 8 has implemented SVG 1.1 Tiny in its core. Browsers like Google Chrome, Safari, and Internet Explorer 9 are also capable of displaying images in SVG format without the need for external plugins. Other web browsers such as Internet Explorer versions prior to 9 require a connector or plug-in.

Origins

In 1996, Chris Liley wrote for the W3C a document with guidelines on the possible requirements to integrate a standard file format to describe vector graphic elements. By 1998, several companies had submitted proposals to this body, of which two mainly served as the basis for the drafts that would constitute SVG: the VML developed by Microsoft for its RTF document format and the PGML developed then by Adobe in coordination with IBM, Netscape and SUN. After the publication of the SVG standard, Microsoft disassociated VML arguing that it was a product already on the market, while Adobe openly celebrated standardization of PGML; support for SVG was integrated into different software products from the latter company such as Adobe Illustrator and the ASV file viewer.

General content

The image illustrates a difference between bit maps and vector images. The vector image can be resized, as much as required, without loss of image quality. This is not the case with a bit map.

Advantages of SVG

The advantages of using the SVG format over other image formats are that you can:

Create and edit with any text editor.
Search, index, code and compress.
Print with high quality in any resolution.
They can be changed in size without losing image or graphic quality.
They're scalable.
SVG is an open standard.
SVG files are composed of pure XML code.

SVG uses XML format

In order to understand SVG a bit from the code you should have a basic understanding of HTML and XML.

Therefore you must carry

Opening and closing labels (Like HTML)
Attributes.
As an XML dialect, the namespace is defined, otherwise the browser will not interpret it correctly.

Basic structure of an SVG

The SVG code must contain:

viewBox.
xmlns.

Δsvg ViewBox="0 0 20 20 20" xmlns="http://www.w3.org/2000/svg" ▪ ▪Basic structure of SVG▪ ▪.circle {fill: blue}
 Δ/style ” class="circle" cx="5" Cy"5" r="5" / 2005Δ/svg

Types of graphic objects

The SVG specification allows for three types of graphical objects:

Vector geometric elements, such as paths or paths consisting of straight and curves, and areas limited by them.
Images of bit/digital map.
Text.

Graphic objects can be grouped, transformed and composited into pre-rendered objects, and can be given a common style. The text can be in any XML namespace supported by the application, which improves the searchability and accessibility of SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, effect filters, object templates, and extensibility.

SVG drawing can be dynamic and interactive. The Document Object Model (DOM) for SVG, which includes the full XML DOM, enables simple and efficient vector graphics animations using ECMAScript or SMIL. A rich set of event handlers, such as "onMouseOver" and "onClick", can be assigned to any SVG object. Due to its compatibility and relationship with other web standards, features such as scripting can be applied to SVG elements and other XML elements from different XML namespaces simultaneously and within the same web page. An extreme example of this is a complete set of rendered as an SVG object.

If storage space is an issue, SVG images can be saved as gzipped files, in which case they become SVGZ images. Due to the verbosity of XML, it tends to compress very well, and these files can be much smaller.

The original vectorized file or file (SVG) is smaller than the bitmap version except for any program that forces a vectorization as it vectorizes details that are generally of little use, approachable by other methods or invisible, to which insert hidden information and signatures of all kinds.

Complexity

Tomato in SVG

Because it is a vector language, SVG allows you to create complex images.

SVG Geometric Elements

The geometric elements are objects provided with basic and optional or default generic attributes.

All objects are framed in a window, with a width (width) and height (height) determined with integers. This window has a coordinate system whose origin is located at the top left and in which the positive values of x and y are oriented to the right and downwards respectively.. Each value is determined with whole numbers or with a percentage with respect to the work area.

A given coordinate reference system or object in the standard can be modified using transformations. The following example shows two transformations: one of position (translation) of the origin of coordinates, through the command "translate" and a scale one, using the "scale" command.

Regular corrected orientation used for graphic representation

Δsvg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"▪ . transform="translate(50,150)"▪ . transform="scale(1,-1)"▪...
 ▪ ▪Δ/svg

Attributes

All objects share some generic attributes:

Every visual element of a figure has a color with 4 possible expressions with the black color by default:

Nominally: network, yellow, blue, aqua, salmon, tomato, orange, lightgreen, etc.
With hexadecimal values: #ff0000, #ffff00etc.
With summary hexademic values #abc=#aabbcc: #f00, #ff0etc.
Functional: whole as rgb(255,32,50) or percentages as rgb(100%,10%,0%).

Each figure has a contour whose thickness and color can be modified, respectively, using the parameters stroke-width and stroke.

There are three types of line unions: stroke-linejoin="miter" (for angles less than 30 degrees the entire value of the corrector, stroke-miterlimit="4 is increased, otherwise it becomes "bevel"), stroke-linejoin="round" and stroke-linejoin="bevel" in the image respectively.

There are three types of end lines: stroke-linecap="butt", stroke-linecap="round" and stroke-linecap="square" in the image respectively.

Intermittent edges can be added following the pattern marked by integer successions with stroke-dasharray as for example stroke-dasharray="2,3,5,7,11,13".

Almost all figures have a filling that can be modified in color, fill, difuminated or filtered in different ways.

Every figure has an opacity, opacity, its value varies between 0(transparent) and 1(default rate).

Lines

The object line basically consists of two points, (x1, y1) and (x2, y2), between which the line is drawn. a straight segment:

<line x1="..." y1="..." x2="..." y2="..."... />

Rectangles

The rectangle object basically consists of a point whose upper left corner or origin is (x, y), and its dimensions are represented by the height parameters and width:

<rect x="..." y="..." height="..." width="..."... />

Circle

The circle object consists of a point whose center has the coordinates (cx, cy), and its radius is r:

<circle r="..." cx="..." cy="..."... />

Ellipse

The object ellipse consists of a point whose center has the coordinates (cx, cy), a horizontal radius, rx, and a vertical radius, ry:

<ellipse cx="..." cy="..." rx="..." ry="..."... />

Mixtiline

Sample of different orientation orders for the same string d

The mixtilinear object basically consists of points joined by lines that may or may not close a space. These dots form strings beginning with M or m that can be joined with others to form a whole. The use of upper case refers to absolute values of coordinates and lower case for relative values, that is, it considers the last given point as the origin of coordinates.

Links between points:

If after a point is used the order L or l, the following points are joined with straight segments.
If after indicating a point the order appears H or V (for absolute coordinates) or h or v (for relative coordinates), both points are joined with a horizontal or vertical line keeping the other coordinate fixed.

If after a point is used the order Q or q, generates a quadratic Bézier curve, between the first point and the last through a control point whose coordinates appear after the order.
T or t in the curves of Bézier quadratic previously drawn, successively calculating each time automatically a control point.

If after a point the order appears C or c, the following stitching generates a Cubic Bézier Curve being the first two, the control points of both ends of the curve and the last one is the final point of the curve that joins with the first. S or s in cube curves successively, automatically calculating control points.

If after a point appears A or a, the extreme points will be joined, P and Q with a elliptical or circular curve according to the values of Rx and Ry radios regarding the axes of the ellipse. The value of U and V changes the direction and visible part they present respectively relative to P and Q, as they are 1 or 0. The value of G is a rotation of the axes of the ellipse.

To close curves and trajectories, the chain of points will be closed with Z or z whether or not the order is capitalized.

Openings:

To create an opening in an enclosure with interior(fill other than "none") use a string facing away from the edge of the enclosure (there are two possible orders: clockwise and counterclockwise), this will generate an enclosure whose interior will have only one orientation, otherwise there is no opening.

Text

Font-family sample (current status of Commons)

You can add text, starting from: a base point x and y and configure the characteristics of the text string with the parameters: font-family (font type), font-size (font size) and font style by font-style (with one of four possible values: normal, inherit, oblique, or italic):

<text x="..." y="..." font-size="..." font-style="..." >... </text>

Groups

Objects can be grouped so that they share default attributes and a fixed arrangement in space for convenient duplication:

<g... >...</g>

Duplicates

To duplicate both internal and external objects you have to include in the <svg> the following snippet:

<svg xmlns:xlink="http://www.w3.org/1999/xlink"... >... </svg>

Duplicate svg objects

You can duplicate objects previously identified with id="...", where the dot space indicates the name.

<use xlink:href="#..."/>

Image Linking

You can add or embed links to images of the type *.png, *.jpg or *.svg inside a rectangle of parameters x, y, width and height:

<image xlink:href="... *.jpg" x="..." y="..." width="..." height="..." />

This option is not supported by Wikimedia Commons.

Clippings

Objects can be clipped by fills of other objects, for example, a circle by a triangular enclosure. In the example below, the clipPath command with the "id" identifies the name of the area to crop. The following path command with the clip-rule parameter indicates whether a point falls inside the padding area (nonzero) or outside ( evenodd, as in the case presented). After closing the command with </clipPath>, the following command draws a circle to which the clipped area is applied with the parameter clip-path="url(#name of the area)" .

¢ÜClipPath id="short"▪ ♫ fill="#0ff" d="m119,71l-103,60l120,0" clip-rule="evenodd"/ 2005Δ/clipPath” r="80" cx="12" Cy"130" stroke="#000" fill="#999" clip-path="url(#cutter)"/ 2005

Transformations

The transformations allow you to perform similarities on images through the matrix:

$Imagen,,final={begin{pmatrix}a&c&e\b&d&f\0&0&1end{pmatrix}}*,,Imagen,,inicial.$

<g transform="matrix(a,b,c,d,e,f)">... </g>

Translations.

<g transform="translate(e,f)">... </g>

Rotations.

<g transform="rotate(g)">... </g>

Symmetries.

<g transform="scale(1,-1),rotate(g)">... </g>

Homotetia.

<g transform="scale(k,k)">... </g>

Homotetia followed by symmetries.

Homotetia followed by rotations.

Iteration of a homotecia.
Iteration of a homotecia followed by symmetry
Iteration of a homotecia followed by a rotation
Playing with the alternation of two transformations

Animations

Animations can be created by incorporating programming with a language that the browser supports, such as Python or JavaScript

Browsers that support SVG

Mozilla Firefox: Implement SVG natively from version 1.5. Over time, it was improving compliance with the standard, but with high processor time consumption. From version 3.5, the processing of SVG files has been modified and improved in Firefox.
Opera: Like Firefox, it also has a native SVG implementation, but with little process time consumption. The 9.5 Beta version incorporates the possibility of calling externally to an image in svg format, using the order θimage.
Internet Explorer: Although late, Microsoft started supporting this standard in the Internet Explorer browser from its ninth version.
Apple Safari: Your 3.1 version (for Windows or Mac OS X operating system computers) has SVG file support implementation for both images and advanced text.
Google Chrome: From its first version, Google incorporated SVG implementation natively (as it uses WebKit).
Microsoft Edge: Support the SVG standard from the first version included in Windows 10 Build 10049 version.

Editing software

There are currently many graphic design programs that support it. Among those that are free software is Inkscape. The free office suite LibreOffice incorporates Draw, an exclusive program for working with SVG and other vector graphic files. There are also online editors that allow you to open or create files, such as Method Draw, Vector Paint, Draw SVG, and.

Contenido relacionado

Más resultados...