SVG (Scalable Vector Graphics) is an image format that is gaining more and more ground lately in front-end development. It has more implementations already in CSS which is great news, so many new possibilities will come from this.

You might ask, what is SVG good for, is there any advantage to use it? Let’s see:

1. SVG is scalable and because it is a vector, it does not loose quality when resized (not like raster images as jpg, png, gif)

2. It’s file size is much smaller then other raster image competitor
3. it has paths, so you can make any shape you want

4. it has filters for pixel manipulation, already defined shapes, clipping mask and a lot of text effects

5. can be used inline in the HTML

6. it has great browser support (IE10+, FIREFOX, CHROME, SAFARI, OPERA)

SVG’s image pixel manipulation capabilities are even higher then it’s counterpart, the HTML5 canvas. It has a few filter primitives, that you can combine and make composites with them, just like in the photoshop image effects tutorials. SVG also has a learning curve, so you have to know the basics of compositing, colors, channels, layers and so on, because in the usage of svg filters you will have a lot of manual control over each part of the effect, like blend, colormatrix, morphology, displacement map and so on.

Let’s see what kind of predefined shapes does SVG have?

- Rectangle
- Circle
- Line
- Polyline
- Ellipse
- Polygon
- Path

In css we have the <div> tag, thats is similar to <rect> SVG tag. Let’s set up a div tag and a rect tag in a parallel manner:

   <div class="rectangle" 
      style="background: rgba(0,0,255, 0.4); 
             border: 1px solid rgba(0,0,0,0.8); 
             position: absolute; 
             left: 10px;
             top: 10px;
             width: 200px;
             height: 100px;
             border-radius: 10px 5px 10px 5px;
             ">
                  <p style="
                       position:absolute; 
                       left: 10px; 
                       top:50px;
                       font: bold 25px Verdana;
                       color: white;
                  ">
                           Hello everybody!
                  </p>
   </div>

Since each object in an svg acts like an absolutely positioned element, I gave the same treathment to our div. The attributes on the svg rectangle appear in the same order as on the div to make it easier to associate. The text tag in svg can not be inside the rect tag, they are on the same level. So this is the SVG version:

   
     <rect 
         fill="#00f" 
         fill-opacity="0.4"
         stroke-width="1"
         stroke="#000"
         stroke-opacity="0.8"
         x="10"
         y="10"
         width="200"
         height="100"
         ry="10"
         rx="5">         
     </rect>
     <text 
        x="10" 
        y="50"
        font-size="25"
        font-family="Verdana"
        fill="white">
            Hello everybody!
     </text>                 

I think this is very straightforward:

  • background = fill
  • the alpha channel in the rgba(the 4th value) = fill-opacity
  • border-color = stroke (no shorthand)
  • border-width = stroke-width
  • border-color rgba alpha channel(4th value) = stroke-opacity (of course you could set rgba directly to the stroke attribute)
  • left = x
  • top = y
  • width and height = same
  • border-radius = ry and rx ( vertical and horizontal rounding)
  • for the text node in SVG we have a separate tag ()
  • padding-left, padding-top = x and y
  • font-family, font-size = same
  • color = fill

As you can see in SVG everything is filled, like on a paint canvas, you don’t have color and background, you have only the property fill. This way it’s verry easy to fill even a text with anything you want, starting from gradients to images inside the text. You can also set dashed borders. In CSS it would be border-style: dashed in SVG would be the attribute stroke-dasharray, which is a much more advanced form of the dashed border. It can set the size of the dashes like this: stroke-dasharray: 10 5 but it can have even more complicated patterns like stroke-dasharray: 20,10,5,5,5,10 .

Also other similarities that worth to be mentioned :

  • vertical-align = alignment-baseline
  • font-variant, font-weight = same
  • opacity = same
  • overflow= same
  • text-decoration = same
  • visibility = same
  • word-spacing, letter-spacing = same
  • writing-mode = same

As the title says, SVG is powerful. This is the basic stuff that SVG can do, there are so many more where CSS fails and SVG continues. Let’s just mention a few:

- SVG path with a lot of options like bezier curve, elliptical arc etc.
- the other predefined shapes with their own attributes
- advanced filters and composites
- many values for properties, like stroke-linecap, stroke-linejoin etc
- clipping masks

But all this I will discuss in an other article. Till then let’s just mention how far did CSS got with SVG-like features:

- clip-path: circle(20px at 15px 35px);
- CSS filter property with a few values like blur, sepia, hue-rotate etc
- mask-image CSS property
- text-stroke
- CSS transform property
- background-blend-mode
- border-image
- border-radius

This is all I could think of. SVG can be animated also just like CSS and what standard we could for that is called SMIL, but that’s another story for another article.

If you liked this introductory article about SVG and you would like to read more about this, please leave a comment.