reveal.js

Scalable

Vector

Graphics

What

SVG

SVG is a language for describing two-dimensional graphics in XML(eXtensible Markup Language - used to store and transmit data). Basically, it is a text file that is an open web standard for describing 2D vector images without loss of quality when scaling.

SVG is a W3C Recommendation.

Ok, now you know what is SVG.

I think next question which you want ask

What can I get using

SVG

Scalability and responsiveness

Under the hood, SVG uses shapes, numbers and coordinates rather than a pixel grid to render graphics in the browser, which makes it resolution-independent and infinitely scalable.

With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals, and you’ll be sure they’ll look clear and crisp at any size.

In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which cause them to pixelate when they’re scaled.

Programmability and interactivity

SVG is fully editable and scriptable. All kinds of animations and interactions can be added to an inline SVG graphic via CSS, JavaScript.

Accessibility

SVG files are text-based, so when embedded in a web page, they can be searched and indexed. This makes them accessible to screen readers, search engines and other devices.

Performance

One of the most important aspects impacting web performance is the size of the files used on a web page. SVG graphics are usually smaller in size compared to bitmap file formats.

Logically, the next question which you have

Where I can use

SVG

and best choices for it

Plain illustrations and diagrams

Any traditional drawing that lends itself to being produced using pen and pencil should translate perfectly into the SVG format.

Logos and icons

Logos and icons must be clear and sharp at any size — be it the size of a button or that of a billboard — which makes them ideal candidates for SVG. Furthermore, SVG icons are more accessible and are much easier to position.

Animations

You can create appealing animations, including cool line drawing effects using SVG graphics. In fact, SVG code can interact with CSS animation, as well as JavaScript and its own built-in SMIL animation functionality.

Interactivity (charts, graphs, maps)

SVG can be used to plot data and update it dynamically based on user actions or other events.

Special effects

Many live effects can be achieved by using SVG, including shape morphing or different gooey effects.

Building interfaces and applications

SVG enables you to make sophisticated interfaces that you can integrate with HTML5, web-based applications, and rich internet applications (RIAs).

Another question that arises you is

How about browser support?

SVG (Scalable Vector Graphics) is officially supported by all main web browsers, including Internet Explorer.

Finally, it's time to show you what

looks like

SVG

Hello, World! My name is Circle. I am SVG-element.

The next step, I tell you what ways

we have to embed

SVG

elements

We have several ways to use this

item in your project:

1. In HTML5, you can embed SVG elements directly into your HTML pages.

This method retains all scripts, links and other interactive.

2. Also, SVG can be inserted to the page via CSS: through the Background-Image property.

If there is some script, interactivity and references in SVG, they will be ignored.

3. The easiest way to insert SVG is to use the tag.

Note: Image sizes can be set in the SVG document itself. You can increase up to any size without loss of quality, because this is a vector graphic. Also, this item can be done through CSS.

4. Through tags '< object>', '< iframe>' and '< embed>'.

Maintaining the main features of SVG.

5. Like a font through @font-face.

Since any font is nothing like a set of vector figures, the SVG can be inserted to the page through the property @font-face.

I think that for the first time we looked at a sufficiently large amount of information, therefore, it is to finish their presentation.

But do not forget that, it is only a small part of what kind of ways it provides such

technologies like SVG.

We will have to study with you:

Positions

Basic Shapes

Paths

Fills and Strokes

Gradients

Patterns

Texts