Know me: SVG Part-1

Scalable Vector Graphics

Hi all, Today we here to know few hacks on how to apply or change the effects of an SVG. Though many are experts in about to discuss, this one is for beginner’s who has started to make some impressions on the sands of CSS.
Let us first begin with a question on What is SVG…..???!! .Also, know a little about it.

SVG stands for Scalable Vector Graphics.

SVG is a language for describing two-dimensional graphics. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Sophisticated applications of SVG are possible by use of a supplemental scripting language which accesses SVG Document Object Model (DOM), which provides complete access to all elements, attributes and properties.

A rich set of event handlers can be assigned to any SVG graphical object. Within a web page, the same scripts can work on both HTML and SVG elements.

SVG can be integrated with HTML either by using SVG in HTML or by using HTML in SVG, in both cases either by inclusion or reference. Elements in an SVG document can be styled using CSS.

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup. There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties.

Let us dive into few Presentation attributes that can be modified with CSS

1. The fill attribute — has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.

You can use this attribute with the following SVG elements:

• <altGlyph>
• <circle>
• <ellipse>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tref>
• <tspan>

EXAMPLE

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate
      attributeType="XML"
      attributeName="r"
      from="0"
      to="40"
      dur="5s"
      fill="freeze" />
  </circle>
</svg>

Hope, you knew a chunk in SVG. We‘ll sail across other attributes in next parts to come. Happy Learning.