Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Basic Shapes Tutorials

SVG (Scalable Vector Graphics) is a graphic format used used to display a variety of graphics on the Web. SVG uses XML (Extensible Markup Language) to define vectors that describe lines, curves, shapes, colors, and text. Using vectors means that SVG graphics is infinitely scalable.

You might think that SVG and XML means it is extremely complicated but actually it is nothing more than text files and is pretty much human-readable. That means you can modify SML files nad even create your own. There are powerful and complicated WYSIWYG (What You See Is What You Get) applications for creating SVG graphics, but there are trade offs. A WYSIWYG commonly adds a huge amount of overhead. This might be META data, unnecessary precision, and non-standard code. When you hand code SVG you get fast and efficient graphics.

SVG has a huge number of practical uses; banners, charts, drawings, diagrams, graphs, icons, illustrations, logos, maps, and much more. SVG is an W3C (World Wide Web Consortium) standard and as a global industry standard it will continue to be the standard for vector graphics in the browser.

In this article I explain how to code the basic shapes; rectangles, rounded rectangles, circles, ellipses, and polygons. All you need to follow along is a basic text editor like Windows Notepad and a web browser. Save your files with the extension .svg and double-click on them to open them in your browser.

Rectangle

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg"<
  <rect x="10" y="10" width="100" height="100" stroke="black" stroke-width="4" fill="white"/>
</svg>

Rectangle Syntax

<rect x y width height stroke stroke-width fill>

AttributeDescription
xx-axis coordinate of the left side of the rectangle
yy-axis coordinate of the left side of the rectangle
widthThe width of the rectangle. Zero or a negative value is an error
heightThe height of the rectangle. Zero or a negative value is an error
strokeThe stroke color. rgba (transparency)
stroke-widthThe stroke thickness
fill(color) rgba (transparency)

Rounded Rectangle

<svg width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" rx="10" ry="10" width="100" height="100" stroke="black" stroke-width="4" fill="white" />
</svg>

Rounded Rectangle Syntax

<rect x y width height rx ry stroke stroke-width fill>

AttributeDescription
rxFor rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error
ryFor rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268