everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development

Advertisements

Draw SVGs in HTML and CSS: A Beginner’s Guide

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based format for vector graphics that can be rendered in a web browser. Unlike raster graphics (e.g., JPEG, PNG), vector graphics are resolution-independent, meaning they can be scaled up or down without losing quality. This makes them well-suited for use on the web, where images can be viewed on a variety of devices with different screen resolutions.

In this article, we will dive into the basics of SVG, exploring its elements, attributes, styling options, and showcasing examples for you to have a comprehensive understanding of SVG and its capabilities.

Syntax and main attributes

AttributeDefinition
width
Specify the width of the SVG element.
heightSpecify the height of the SVG element.
viewBoxThis attribute has included 4 values that define the rectangular area: min-x, min-y, width, and height

To draw an SVG in HTML, you can simply add an SVG element to your HTML document:

<svg width="200" height="200">
  <!-- Your SVG content goes here -->
</svg>

The width and height attributes specify the size of the SVG in pixels.

What is viewBox

The viewBox attribute in SVG is a way to define the aspect ratio and the size of the visible part of an SVG image. It is a crucial aspect of SVG images as it controls how the image is scaled and positioned within the available space.

The viewBox attribute has 4 values that define the rectangular area: min-x, min-y, width, and height, for example:

<svg viewBox="0 0 300 200" width="500" height="400">
  <!-- your SVG content here -->
</svg>

In this example,

  • The minimum x and y coordinates of the visible area are set to (0, 0) and its width and height (300, 200).
  • While the width and height of the svg element are set to 500×400 pixels.
  • The result is that the visible part of the image, defined by the viewBox, is scaled to fill the available space of 500×400 pixels, while preserving its aspect ratio.

Shapes

<rect>

The <rect> element in SVG is used to create a rectangle. You can specify the position, size, and shape of the rectangle using various attributes.

AttributeDefinition
x Specify the x coordinate of the top-left corner of the SVG element.
ySpecify the y coordinate of the top-left corner of the SVG element.
rx The x-radius of the rounded corners.
ry The y-radius of the rounded corners.
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="75" rx="20" ry="20" fill="orange"/>
</svg>

In this example, the above code creates a rounded rectangle that starts at the point (50,50), has a width of 100 units, a height of 75 units and rounded radius in 20 units

<circle>

The <circle> element in SVG is used to create a circular shape. It requires a cx and cy attribute to specify the center of the circle, and a r attribute to specify the radius.

AttributeDefinition
rcircle radius
cxthe x-coordinate center point
cythe y-coordinate center point
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="green"/>
</svg>

In this example, the above code creates a circle with a center point at (100,100) and a radius of 50:

<ellipse>

The <ellipse> element in SVG is used to create a ellipse shape. It requires cx and cy attribute to specify the center of the ellipse, and rx and ry attribute to specify the horizontal radius and vertical radius of the ellipse

AttributeDefinition
cxthe x-coordinate center point
cythe y-coordinate center point
rxthe horizontal radius of the ellipse
rythe vertical radius of the ellipse
<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="blue"/>
</svg>

In this example, we have an <ellipse> element with a center point at (50,50) and 40 for the horizontal radius and 20 for the vertical radius.

<line>

The <line> is used to create a line segment that can be styled and positioned within an SVG.

AttributeDefinition
x1the starting point of the line on the x-axis
y1the starting point of the line on the y-axis
x2the end point of the line on the x-axis
y2the end point of the line on the y-axis

The <line> element requires two attributes to be specified: x1 and y1 which define the starting point of the line, and x2 and y2 which define the end point.

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="orange" stroke-width="2"/>
</svg>

In this example, a line is added from the point (10,10) to the point (90,90).

<polyline>

The <polyline> is used to create a series of connected lines that form a single shape. The shape is defined by a set of points, and the <polyline> element draws a line connecting each point in the order they are specified.

<svg width="500" height="300">
  <polyline points="100,100 150,50 200,100 250,150 300,100"  fill="none" stroke="green" stroke-width="3"/>
</svg>

The points attribute of the <polyline> element specifies the x and y coordinates of the points that make up the shape.

<path>
AttributeDefinition
MThe M attribute is used in the path element to start a new subpath. It takes two values, the x and y coordinates of the starting point, and is used to define the starting point of a new shape in the SVG image.
LThe L attribute is used to draw a straight line in an SVG image. It takes two values, the x and y coordinates of the end point, and is used to connect the current point to the specified endpoint.
ZThe Z attribute is used in the path element to close the current subpath. When used, it creates a straight line connecting the current point to the starting point of the subpath. The Z attribute is often used in combination with the M and L attributes to create closed shapes like circles, polylines, and polygons.

In addition to basic shapes, you can also use <path>, to create more complex shapes. Paths are defined using a series of commands, such as M , L and Z , that specify how to draw the shape.

For example, here’s a <path> element that creates a triangle shape:

<svg width="200" height="200">
      <path d="M 10 10 L 60 10 L 35 60 Z"  fill="none" stroke="green" stroke-width="3"/>
</svg>
<polygon>

The <polygon> element in SVG create a shape that is defined by connecting 3 or more points together to form a closed polygon shape.

The shape is created by specifying the points attribute, which defines the x and y coordinates of each corner of the polygon. In this example, the code creates a polygon shape with 5 points:

<svg viewBox="0 0 100 100">
  <polygon points="20,20 40,40 60,20 80,40 100,20" fill="blue" />
</svg>
<text>

The <text> element in SVG is used to create text within an SVG graphic. You can specify the text content using the text node and the position of the text using the x and y attributes, which define the starting point of the text.

<svg width="200" height="200">
  <text x="100" y="100">Hello world!</text>
</svg>
<tspan>

You can also use the <tspan> element within the <text> element to specify different styles or positions for different parts of the text. For example:

<svg width="200" height="200">
  <text x="100" y="100" font-size="24" fill="blue" font-family="Arial">
    <tspan fill="red">Hello,</tspan>
    <tspan fill="green">SVG</tspan>
  </text>
</svg>

Styling

Inline styles:
AttributeDefinition
fillSpecifies the fill color of an SVG shape.
strokeSpecifies the color of the stroke (outline) of an SVG shape.
stroke-widthSpecifies the width of the stroke (outline) of an SVG shape
<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" 
        style="fill: blue; stroke: red; stroke-width: 2;" />
</svg>

In this example, an SVG rectangle is created with a blue fill and a red stroke (outline) with a stroke-width of 2. The styles are specified as inline styles within the <rect> element.

CSS styles:
<style>
  .sample {
    fill: blue;
    stroke: red;
    stroke-width: 2;
  }
</style>

<svg viewBox="0 0 100 100">
  <rect class="sample" x="10" y="10" width="80" height="80" />
</svg>

In this example, the styles for the rectangle are defined in a <style> block and then applied to the rectangle using a class selector (.sample). This allows for the styles to be reused across multiple elements in the graphic. The styles can also be defined in an external stylesheet and linked to the SVG document using a <link> element.

Animations & Transition

In addition to basic styling, you can also use CSS animations and transitions to create dynamic and interactive graphics. For example, you could animate the position of a shape using the @keyframes rule:

The keyframes are specified using the CSS animation property, which allows you to control the duration, easing, and iteration count of the animation.

<svg width="200" height="200">
  <rect id="rect" x="0" y="0" width="100" height="100" fill="blue"/>
  <style>
    #rect {
      animation: move 2s linear infinite;
    }
    @keyframes move {
      from { transform: translate(0, 0); }
      to { transform: translate(100px, 100px); }
    }
  </style>
</svg>

In this example, the @keyframes rule defines an animation called “move” that takes 2 seconds to run, uses a linear easing, and repeats infinitely. The animation move the position of the rectangle from (0,0) to (100,100) over the course of 2 seconds.

Conclusion

In conclusion, SVG is a powerful tool for creating graphics and illustrations in HTML and CSS. it provides a lot of flexibility in designing graphics. The ability to use styles, attributes and CSS to control the appearance of graphics, in addition to its scalability, makes it a great choice for modern web design and development.

Please leave a comment below and let me know if you found this article helpful or have any questions. And don’t forget to share this article with your friends or colleagues who might find it useful. Happy coding!

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount

$5.00
$10.00
$15.00

Or enter a custom amount

$

Thank you for your contribution!

Donate

Topics:

CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Advertisements

Recent Post:

Advertisements

Related Posts

Advertisements
Advertisements
%d bloggers like this: