Summary -

In this topic, we described about the below sections -

SVG pictures are called scalable because their size can be improved or reduced without missing picture quality. The picture quality doesn’t miss because svg uses vector graphics that contain paths rather than pixels. To involve vector graphics in the website, cover the picture data in the HTML <svg> tags.

What is SVG?

SVG stands for scalable vector graphics. SVG is an xml-based technology used to describe two-dimensional vector-based graphics for the web. Vector image cannot lose the graphics quality when it is zoomed or resized.

Using a series of statements an SVG picture is drawn out that follows xml schema (means any text editor is used to create and edited the SVG pictures, such as notepad etc). We can say SVG is a equivalent of HTML. However, It is a mark-up language that designers use to explain 2D vector graphics for visuals.

SVG is depend on XML and works with additional web standards such as DOM and CSS. Pictures in SVG are designed and saved as XML text files by utilizing any text editor that is chosen. We should consider the saving files with a .svg extension.

Advantages -

Below are some advantages of SVG across other image formats like PNG, GIF, JPEG etc,

  • SVG pictures can be compressed, indexed, searched, and scripted.
  • SVG pictures can be modified and created in real time using java script.
  • SVG images can be printed with high quality at any resolution.
  • SVG content can be animated using the built-in animation elements.
  • SVG pictures can have hyper-link to other documents.
  • Easy to create sample graphics with xml.
  • Having a smaller file size, makes loading graphics and transferring much quicker on the web.
  • It is very simple to generate a very competed graphics since vector uses lines.
  • Painting - Outlines and area fills using patterns, transparency, makers, solid colors, and gradients.
  • Color - stroke and fill properties defined using standard 3-digit or 6-digit rgb or hex values.
  • Gradients and patterns – Similar to CSS3 bitmap backgrounds or gradient declarations.
  • Clipping, masking and compositing - outline regions can be painted using elements.
  • Filters - effects can used on all elements within a container, e.g. adjustments, color, blurring, lighting, etc.
  • Linking - hyperlinks to other documents.
  • Interactivity - connecting event handlers using JavaScript.
  • DOM Scripting - manipulating and accessing SVG elements using the Document Object Model.
  • Animation - constructed animations using SMIL (Synchronized Multimedia Integration Language).
  • Fonts - we can use any text font available as a basic font in an SVG file.
  • Metadata - creators, subjects, descriptions, titles, and other properties about the SVG image.

Disadvantages -

  • SVG code designed by xml, can be complex and lengthy, hard to trouble shoot for errors.
  • In case of excessively used the complex graphics, the web kit engine gets noticeably slower.
  • The complexity surrounding the expansion of SVG, immediately effects on the amount of dependable information accessible on the subject.
  • Unlike HTML or XML, SVG has extremely small information.
  • Although a text editor is enough to generate an SVG file, it's not a feasible option for several developers and designers.
  • Authoring tools accessibility for SVG are relatively less when comparing the tools accessible to develop alternative picture formats.

<svg> element

In HTML5, svg is a tag to produce svg elements. SVG is an inline-block level element. Inside svg element, number of methods for drawing text, circle, boxes, paths, and graphics images are created.

SVG element of default height is 150 and the default width is 300. Using width and height attributes we can change the height and width of the svg element.

Browser support

The following numbers in the table identify the initial browser version that completely supports the <svg> element

Element Chrome Edge Firefox Safari Opera
<svg> 4.0 and above 9.0 and above 3.0 and above 3.2 and above 10.1.0 and above

Embedding SVG in HTML5

In html5 using<svg>...</svg> tag embedding SVG directly, which has given in the below simple syntax −

<svg xmlns = "http://www.my schools.org/2006/svg">
	...
</svg>

configuration option was also introduced by Firefox 3.7 ("about:config") where we can allow HTML5 using below steps −

  • In our Firefox address bar type about:config.
  • Press the "I'll be careful, I promise!" button on the warning message that seems (and make sure we adhere to it!).
  • Text html5.enable into the filter bar at the top of the page.
  • Presently it would be incapacitated, so press it to toggle the value to true.

Currently our Firefox HTML5 parser should be allowed and we should be competent to experiment with the following examples.

Drawing paths and shapes with SVG

<svg> element used to draw basic vector-based paths and shapes on the web pages. Below are some of them explained in detail –