Vector graphics are widely used in print media. In the website, we can also add SVG vector graphics (Scalable Vector Graphic). Referring to the official specification on W3.org, SVG is described as a language for describing two-dimensional graphics in XML. SVG allows you to create vector graphic shapes (such as an outline made up of straight lines and curves), images, and text.
Advantages of SVG
SVG offers several advantages over raster graphics, here are some of them:
Scalability
A raster image is made up of pixels and loses quality when scaled, while vector graphics maintain their proportions regardless of scale.
Speeding up an HTTP request
An SVG file can be embedded directly into an HTML document using the svg tag, so the browser doesn't need to make a request. It leads to better performance and less load on the site.
Stylization and scripts
Embedding the svg tag directly into the HTML document also allows us to easily set graphic styles using . We can change object properties such as background color, border transparency, etc. Moreover, we can also manipulate graphics using .
Images can be animated and editable
An SVG object can be animated by using element animation using css or JavaScript (JQuery). An SVG object can be edited with any text editor or vector graphics editor, such as Inkscape or Adobe Illustrator.
Smaller file size
SVG has a smaller file size compared to a raster image.
Creating Simple Shapes with SVG
According to the specification, we can create some basic shapes such as rectangles, circles, lines, ellipses, polylines and polygons using SVG and in order for the browser to display SVG graphics, all of these graphic elements must be inserted into a tag tag. Let's look at the examples below:
Line
To draw a line in SVG you can use the element
As you can see above, the origin point of the line is expressed with the first two attributes x1 and x2 , and the end point of the line coordinate is expressed with y1 and y2 .
There are also two other attributes, stroke and stroke-width, which are used to define the color and width of the border. Additionally, we can also define these attributes in an inline style:
Style="stroke-width:1; stroke:rgb(0,0,0);"
she ends up just doing the same thing.
broken line
This element is similar to
Rectangle
Drawing a rectangle is also easy with this
Circle
We can also draw a circle with
The first two attributes, cx and cy, define the coordinates of the circle's center. In the above example, we have created 102 as both the x and y coordinates, if these attributes are not specified, 0 will be treated as the default value.
Ellipse
We can draw an ellipse using the tag
Polygon
Using the element
Using a vector graphics editor
As you can see, using simple SVG objects in an HTML document is quite easy. However, when the object becomes more complex, this method is no longer ideal.
Fortunately, as we mentioned above, we can use a vector graphics editor, for example Adobe Illustrator or Inkscape .
If you are working with Inkscape, you can save your vector files in SVG format and then open it in a text code editor. Copy all the codes and paste them into your HTML document.
You can embed .svg files using embed , iframe and object tags, for example;
The result will ultimately be the same.
*In this example we are using an image
Today we’ll talk about SVG, what kind of format it is, what it’s used with, and whether it’s worth using. Although the format is not particularly new, it has earned its popularity thanks to its implementation. All latest versions browsers have already received support for this format.
Why is he so popular? And what exactly makes it different from others? Today we will answer these questions and also tell you what you need to know to get started working with these file types.
What is SVG?
SVG – Scalable Vector Graphics – is a vector-based format for web developers. This type format has become so popular due to the fact that its images can be displayed at high resolutions without loss of quality, since SVG is a vector format.
The impetus for the development of this language markup was first given by the Consortium World Wide Web(World Wide Web Consortium), which was better known in 1999 as W3C. W3C gave the concept of SVG - a markup language for creating two-dimensional graphical interfaces and images.
Use in practice
What makes SVG so popular and why are more and more designers starting to use it? It's very simple, it works as it should.
SVG is lightweight compared to other formats. This format simply incredible opportunities. Flags, symbols, interface elements. And this is just a small list of how it can be used. The biggest advantage of using it is that it is a vector format, that is, it can be used on any display - whatever their resolution, it will be displayed the same everywhere.
SVG files are quite easy to manage since its files are saved as a static image. You can add interactivity to your website by making very simple but beautiful animations using SVG.
A few examples of where it can be used:
- Logos
- Background image
- Use as a button
- Cards
- Diagrams or drawings
As a rule, SVG is most often used when creating responsive websites, animations and other dynamic effects.
Pros of using SVG
So why should we abandon the usual JPG or GIF in favor of SVG? There are quite a few reasons why you should still use it in your project.
- SVG is a vector format, which is why it is worth using for responsive sites where the size of images depends on the user's display resolution, and SVG fits the bill flawlessly.
- SVG images use XML to define their properties, and therefore have the ability to be even more compressed.
- SVG images are very easy to manipulate, and this opens up even more possibilities for designers who can change colors, add shadows, filters, blurs and many more effects.
- SVG is pretty easy to understand
- SVG works with open web standards
- You can use a regular text code editor to create SVG. This gives you some freedom in your actions, it all depends on your needs and the level of expert knowledge in this area.
Cons of using SVG
You're probably shocked at how many benefits SVG has. And perhaps they thought that it had no downsides. But no, there are definitely a couple, and here are some of them:
- There is no support for older browsers such as Explorer 8 and below.
- SVG cannot be used in photographs as it is a vector format and is used to create various shapes and lines.
What's next?
The future of SVG is just beginning. As an accepted image format (and standard) for mobile, SVG will only continue to gain momentum.
This post is the first in a series of articles about SVG (Scalable Vector Graphic), covering the basics of vector graphics on the site.
Vector graphics are widely used in printing. For websites there is SVG, which according to the official specification on w3.org is a language for describing two-dimensional graphics in XML. SVG includes three types of objects: shapes, images, and text. SVG has been around since 1999, and since August 16, 2011 it has been included in the W3C recommendations. SVG is highly underrated by web developers, although it has several important advantages.
Advantages of SVG
- Scaling: Unlike raster graphics, SVG does not lose quality when scaled, so it is convenient to use for retina development.
- Reducing HTTP requests: when using SVG, the number of calls to the server is reduced, and the site loading speed increases accordingly.
- Styling and scripting: Using CSS, you can change the graphics settings on the site, such as background, transparency or borders.
- Animation and editing: using javascript you can animate SVG, as well as edit in text or graphic editor(InkScape or Adobe Illustrator).
- Small size: SVG objects weigh much less than raster images.
Basic SVG Shapes
According to the official specification, you can draw simple objects using SVG: rectangle, circle, line, ellipse, polyline or polygon using a tag svg.Simple line using tag line with only two parameters - start points (x1 and x2) and end points (y1 and y2):
You can also add stroke and stroke-width attributes or styles to set the color and width:
Style="stroke-width:1; stroke:rgb(0,0,0);"
broken line
The syntax is similar to the previous one, the tag is used polyline, attribute points sets points:
Rectangle
Called by the rect tag, you can add some attributes:
Circle
Called by tag circle, in the example using the attribute r set the radius, cx And cy specify the coordinates of the center:
Ellipse
Called by tag ellipse, works similarly circle, but you can specify two radii - rx And ry:
Polygon
Called by tag polygon, a polygon can have a different number of sides:
Using editors
As you can see from the examples, drawing basic SVG shapes is very simple, but objects can be much more complex. For these, you need to use vector graphics editors, such as Adobe Illustrator or Inkscape, where you can save files in SVG format and then edit them in a text editor. You can insert SVG into a page using embed, iframe and object:
An example is an image of an iPod from OpenClipArt.org.
SVG (Scalable Vector Graphics) is a vector graphics standard developed by the W3C consortium.
SVG is a markup language for describing two-dimensional graphics applications and images, and is a subset of the Extensible Markup Language XML. This also includes a number of related graphical scripts.
SVG is supported by everyone modern browsers for PC and mobile phones. Some features, such as SMIL animations and SVG Fonts, are not as widespread.
The latest version of the full specification is SVG 1.1.
SVG 2 is under development. It will add new, easy-to-use features for SVG, and is also working on tighter integration with HTML, CSS and DOM.
Advantages of SVG
- SVG graphics are created using mathematical formulas that can be adjusted when the image size is changed. Thus vector images scale better than raster ones.
- The size of a vector image is usually smaller than comparable images in JPEG, GIF or PNG formats.
- SVG graphics have text format, which can be edited in a notepad or drawn in graphic vector editors Adobe Illustrator, CorelDRAW.
- SVG scripts and animations allow you to create dynamic and interactive graphics.
- The text in SVG graphics is text, not an image, so it is indexed by search engines.
- You can add multiple links to an SVG image.
- You can connect external tables to the SVG format CSS styles, global styles inside the container or add internal styles using the style attribute on shape and path tags.
Inserting SVG into a Web Page
There are several ways to insert an SVG image into a Web page. The first of them is a simple insertion of SVG code into the page (with a large image, the HTML code of the page will become huge and difficult to read). With other methods, you first need to save the SVG code in a file with the extension .svg.
So, here are the ways to insert an SVG image into a Web page:
- directly inserting code into an HTML document in a container ;
- using an SVG file as a background image;
- connecting an SVG file to an HTML document using tags img, embed, object And iframe;
- connecting an SVG file to a PHP document using the function include.
1. Directly inserting SVG code into a Web document
2. Using an SVG file as a background image
3. Connecting an SVG file using the img tag
