SVG Drawing Basics

[ ]
  • SVG Coordinate Systems and Units In this article, you find the description of the workspace of SVG that is defined by the values of the viewport and viewBox attributes.
  • SVG Basic Shapes In this section, you can learn how to create different simple shapes and apply some style properties to them.
  • SVG Path Data This chapter shows how the paths can be used to drawing various outlines or shapes by combining lines, arcs and Bezier curves. The group of commands for the SVG paths making is described here.
  • SVG Text This section introduces the text content elements and reviews some common attributes that help to display, format and style the text into an SVG image.
  • Basic SVG Transformations You find out how to apply the transform functions for graphic objects rotation, scaling, moving, and skewing through the use of SVG transform attribute.
  • Fills and Strokes in SVG In this section, we describe several properties that allow you to set different aspects of fill and stroke, including color, opacity, thickness, use of dashing, etc.
  • SVG Embedded Content is content that imports into the document from another resource. You will see how to include and render bitmap and HTML element within an SVG object.
  • SVG Filters and Gradients Filter primitives that produce blurring, color and lighting effects, are reviewed. The chapter demonstrates how linear or radial gradients can decorate any line, shape, or text in SVG graphics.