AWESOME SVG

AWESOME

🥇 Benefits of SVG

SVG (from the English. Scalable Vector Graphics) is a scalable vector graphics markup language created by the World Wide Web Consortium (W3C) and included in a subset of the extensible markup language XML, designed to describe two-dimensional vector and mixed vector / raster graphics in XML format.

❶ High compression ratio ☑

❷ Fast Rendering - Painting ☑

❸ Quick element editing ☑

❹ Assigning "a href=" to drawing elements ☑

❺ A simple insert inside an svg of another .svg ☑

❻ It`s easy to embed an image in the "body" of the page ☑

❼ The ability to animate individual elements of the picture ☑

❽ Interactivity through an event handler ☑

❾ Scalability. SVG is a vector format ☑

❿ Quick Editing in Notepad ☑

SVG is intended for description of two-dimensional vector and mixed vector-bitmap graphics in XML format. Supports both still and animated interactive graphics, or in other words, declarative and scripted graphics. Does not support descriptions of three-dimensional objects (not to be confused with the simulation of three-dimensionality through chiaroscuro). It is an open standard recommended by the W3C, the body that develops standards such as HTML and XHTML. SVG is based on the VML and PGML markup languages. Developed since 1999. In 2001, version 1.0 was released, in 2011 - version 1.1, which remains relevant to this day. Version 2 is currently under active development.

A raster image contains information about points, and a vector image contains information about shapes . This shows the key advantage of "vector" over "raster" in terms of scaling for graphical purposes.

✯ Text in graphics SVG this is text, not an image, so it can be selected and copied, it is indexed by search engines, there is no need to create additional metafiles for search robots.

✯ The animation is implemented in SVG using the SMIL language (Synchronized Multimedia Integration Language), also developed by the consortium W3C. Supported scripting languages based on the ECMAScript specification. SVG elements can be manipulated with JavaScript. Using scripts and animations in SVG allows you to create dynamic and interactive graphics. SVG provides an event model, events are tracked (loading the page, changing its parameters, mouse events, keyboard events, etc.). The animation can be triggered by a specific event (such as "onmouseover" or "onclick"), which makes the graphics interactive. Each element has its own events, to which individual scripts can be attached.

✯ SVG - open standard. Unlike some other formats, SVG is not proprietary.

✯ SVG-documents are easily integrated with HTML and XHTML documents. SVG elements are compatible with HTML and DHTML.

✯ Compatibility with CSS (Cascading Style Sheets). The display (formatting and styling) of SVG elements can be controlled through the CSS 3 stylesheet and its extensions, or directly through the attributes of the SVG element.

Practical Tips

✯ To view SVG images using Windows Explorer you need to install the "SVG Explorer Extension".

You can also use "SVGViewer". Possibilities: - Navigate through other svg files in that directory, - Print, - FullScreen mode, - Zoom SVG. Flaws: complete absence of SVG animation (if any), rendering distortions are possible (For example, there is a CSS instruction in SVG, it will not work - because Windows Explorer does not display CSS styles). These programs serve more for general orientation when searching for the desired file. Primary Viewer SVG is any modern browser: CHROME, FIREFOX, OPERA, etc.

✯ SVG creation and advanced editing are done with programs such as: Adobe Illustrator, CorelDRAW, GIMP, Inkscape, Sketch(для macOS)...

✯ Easy editing - such as changing color, resizing, adding animation - is possible with any program like "Notepad". Details: open file with browser and open developer tools (F12), open the same file in Notepad. We find the necessary element and make changes or additions.

✯ When inserting one SVG file into another, you need to remove the duplicate header instructions. View Duplicate Class Names. (For example, the main file has:
<style>.st1{fill:red;}</style>, and the inserted file contains:
<style>.st1{fill:blue;}</style>. To avoid overwriting and save both instructions - rename in the inserted file .st1, for example, to .st_1 , including element references to the class). The inserted file must be placed in a group:
<g id="input_file">Input File</g> . Then it can be manipulated:
<g id="input_file" style="transform:scale(1.1)translate(10px,10px);">Input File</g>

✯ SVG file compression is possible both manually (removing unnecessary spaces, hyphens and indents), and through online services.