HTML Academy
Challenge: Surprised Smiley
An Introduction to SVG12/15
Back to the list of tasks
  • 1. Hello, SVG!
  • 2. Drawing a Rectangle
  • 3. Rectangle Coordinates
  • 4. Corner Rounding
  • 5. Challenge: Fixing the TV
  • 6. Polygons
  • 7. Challenge: Pyramids
  • 8. Drawing a Circle
  • 9. Challenge: Target
  • 10. Drawing an Ellipse
  • 11. Challenge: Surprised Smiley
  • 12. Drawing Lines
  • 13. Challenge: Arithmetic Operators
  • 14. Drawing Polylines
  • 15. Challenge: Hot-Air Balloons
Challenge: Arithmetic Operators
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Drawing Lines

You can draw lines using the linetag. The coordinates of the beginning of the line are specified using the attributes x1 andy1, whereas the coordinates for the end of the line are assigned using the attributes x2 andy2. Coordinates can be specified as a percentage.

Code example:

<line x1="220" y1="10" x2="20" y2="130"/>

Since the line does not form a shape with an inner contour, it should not be set as a shape with a fill color, but as a stroke in order to be displayed. Two attributes are used to control a stroke: stroke and stroke-width. The stroke attribute is used to set the stroke color, and stroke-width is used to set the line width.

<line x1="220" y1="20" x2="20" y2="90" stroke="violet" stroke-width="5" />

Result:

You can only set the line color. The default stroke thickness will be equal to one pixel.

Comments

  • object.svg
  • style.css
SVG
<svg width="220" height="120"> </svg>
CSS
svg { border: 1px solid #dddddd; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Draw an orange line that is 10 pixels thick starting at point (20,20) and ending at point (200,100).

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.