I. Introduction

1. What is SVG

?SVG stands for Scalable Vector Graphics, it was released in 1999, but did not become popular until 2011 on InterExplorer 9. SVG is an XML-based language, used to Describes 2D vector graphics, static and animated, for web applications. The file with the .svg extension is interpreted as an SVG file by default. In this article, I will learn how to combine CSS and SVG, how to include SVG in a web page, and how to manipulate SVG.

Viewing: What is svg

2. Uses of SVG

First, let’s take a look at this comparison table to evaluate together:

Format type Color Palette Uses JPG Lossless compression Millions of colors Still images, photography PNG-8 Lossless compression Up to 256 colors Similar to GIF format, better transparency handling but no animations, great great to use for PNG-24 icons Lossless compression No color limitation Similar to PNG-8 format, handling still images and GIF transperency Lossless compression Up to 256 colors Simple animation , graphics with solid color, graphics without gradient SVG Vector/ Lossless compression Unlimited colors Graphic/Logo for web, Retina display/high dpi resolution

As we all know, bitmap images like JPG, PNG, GIF determine the color of each pixel. A PNG image with a size of 100×100 will require 10000px. Each pixel requires 4 bytes for red, green, blue, and transparent. Therefore a minimum of 40000 bytes is required for such an image. In addition to 1 wish, sometimes people also compress to reduce the size of the file, if PNG and GIF use ZIP compression without losing the original data, the quality is not degraded, and the JPG image has good image quality. degraded, and if compressed, the original image cannot be recovered.

The disadvantage of bitmap images is that when zoomed in, the focus will not be kept as it was. Meanwhile, SVG are vector images defined in XML and have the following significant benefits:

READ MORE  Google The Advantages It Brings

SVG images use less than 150 bytes, which is significantly smaller than PNG and JPG. SVG’s background is transparent by default. Images can be scaled to any size without loss of quality. and elements are created and manipulated very easily on server or browser. SVG images are images that are easy for google search engines to navigate, great for SEO.

People use SVG mainly for logos, charts, simple diagrams.

II. Learn about

1. SVG Basics

is the wrapper tag, which defines it as an SVG element. create a single line. Create rectangles and squares.

Create a polygon, with three or more sides. Create any shape you like by defining points and lines between them. Define reusable resources. There is nothing in the displayed section. Group multiple shapes into a group. Place groups in the section to allow them to be reused. Take the resources defined inside the section and make them visible in SVG.

2. SVG Tools

Some tools that help you draw SVG images are:

If for simple drawing, these tools give different results but the image is quite similar. Generally, complex images require more complex tools.

The resulting code can also be simplified and minimized using SVGO or SVGOMG.

See also: Zombie Tsunami

3. SVG is like a still image

When you use the HTML tag

/* CSS background */.myelement { background-image: url(“https://riclix.com/svg-la-gi/imager_1_4828_700.jpg”);}The browser will disable any scripts, links or features Other interactions are embedded in the SVG file. You can manipulate SVG using CSS just like normal image types such as filter, transform, etc. Combining CSS with SVG often gives better results than bitmap images because SVG images can be scaled infinitely. .

READ MORE  Google Ads: definition

a. Insert SVG image into CSS code

An SVG can be written directly in the CSS code using the background property. It is suitable for small, reusable icons and avoids additional HTTP requests.

.element { background: url(“data:image/svg+xml;utf8,”) center center no-repeat;}viewBox here defines spatial coordinates. In the example above, there will be a yellow circle with a red border, and an area of ​​800×600 starting at position 0, 0.

b. Responsive with SVG images

Unlike normal images, SVG images must specify width and height attributes for the image, because if not set, it will be treated as max-width equal to 0 and will not be able to see the image.

“http://www.w3.org/2000/svg” width=”400″ height=”300″>

4. Insert SVG images into HTML code

SVG images can be placed directly into HTML code, where it becomes part of the DOM tree and can be manipulated with CSS and Javascript:

p>SVG is inlined directly into the HTML:p>svg id=”invader” xmlns=”http://www.w3.org/2000/svg” viewBox=”35.4 35.4 195.8 141.8″> path d=”M70. 9 35.4v17.8h17.7V35.4H70.9zm17.7 17.8v17.7H70.9v17.7H53.2V53.2H35.4V124h17.8v17.7h17.7v17.7h17.7v-17.7h88.6v17.7h17.7v-17.7h17.7V124h17.7V53.2h-17.7v35.4h-17.7V70 .9h-17.7V53.2h-17.8v17.7H106.3V53.2H88.6zm88.6 0h17.7V35.4h-17.7v17.8zm17.7 106.2v17.8h17.7v-17.8h-17.7zm-124 0H53.2v17. 8h17.7v-17.8zm17.7-70.8h17.7v17.7H88.6V88.6zm70.8 0h17.8v17.7h-17.8V88.6z”/> path d=”M319 35.4v17.8h17.6V35.4H319zm17.6 17.8 v17.7H319v17.7h-17.7v17.7h-17.7V159.4h17.7V124h17.7v35.4h17.7v-17.7H425.2v17.7h17.7V124h17.7v35.4h17.7V106.3h-17.7V88.6H443V70.9h-17.7V53 .2h-17.7v17.7h-53.2V53.2h-17.7zm88.6 0h17.7V35.4h-17.7v17.8zm0 106.2h-35.5v17.8h35.5v-17.8zm-88.6 0v17.8h35.5v-17.8h- 35.5zm0-70.8h17.7v17.7h-17.7V88.6zm70.9 0h17.7v17.7h-17.7V88.6z”/>svg>p>The SVG is now part of the DOM.p>You can define dimensions width and height for SVG image in CSS like this:

#invader { display: block; width: 300px;}#invader path { stroke-width: 20; fill: #080;} SVG elements such as paths, circles, or rectangles can be styled like CSS:

/* CSS styling for all SVG circles */circle { stroke-width: 20; stroke: #f00; fill: #ff0;} When edited like this, it will overwrite any attributes defined in the SVG because CSS takes precedence. SVG CSS has a number of benefits:

attribute-based styling can be removed from SVG to reduce page size. CSS can be reused for other SVG images on different pages. CSS effects can be used on SVG such as: :hover, animation, transition…

READ MORE  Sketchup Formation And Development

5. SVG Sprites

The term “Sprites” is actually a technique for putting all decorative images such as icons or buttons into a single image file. Then use the background-position property of CSS to show the correct position needed.

The benefit of this technique is that the web page loads only one large image instead of a series of small images. Yes you would think that loading small images would be faster but this is not correct. Each image when loaded will make a request to the webserver, the more images, the more requests. And this greatly affects the speed of the website. And one thing few people know that when putting all the images in one file, the file size will be significantly reduced compared to the total size of the images combined.

See also: What is Spotify – And How It Works

SVG also has sprites just like regular images. An SVG file can contain any number of images. For example, this .svg file contains the icon folder created by IcoMoon. Each icon is contained in a card and has a unique ID.

svg xmlns=”http://www.w3.org/2000/svg”> defs> symbol id=”icon-folder” viewBox=”0 0 32 32″> title>foldertitle> path d=”M14 4l4 4h14v22h- 32v-26z”>path> symbol> symbol id=”icon-folder-open” viewBox=”0 0 32 32″> title>opentitle> path d=”M26 30l6-16h-26l-6 16zM4 12l-4 18v- 26h9l4 4h13v4z”>path> symbol> symbol id=”icon-folder-plus” viewBox=”0 0 32 32″> title>plustitle> path d=”M18 8l-4-4h-14v26h32v-22h-14zM22 22h-4v4h -4v-4h-4v-4h4v-4h4v4h4v4z”>path> symbol> symbol id=”icon-folder-minus” viewBox=”0 0 32 32″> title>minustitle> path d=”M18 8l-4-4h- 14v26h32v-22h-14zM22 22h-12v-4h12v4z”>path> symbol> symbol id=”icon-folder-download” viewBox=”0 0 32 32″> title>downloadtitle> path d=”M18 8l-4-4h- 14v26h32v-22h-14zM16 27l-7-7h5v-8h4v8h5l-7 7z”>path> symbol> symbol id=”icon-folder-upload” viewBox=”0 0 32 32″> title>uploadtitle> path d=”M18 8l -4-4h-14v26h32v-22h-14zM16 15l7 7h-5v8h-4v-8h-5l7-7z”>path> symbol> defs>svg>III. Conclusion Above, I introduced SVG images, because on viblo, you can’t insert svg illustrations, so please search hard. Hope this article will be of some help to you. Thanks