Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
Scalable Vector Graphics or SVG is an image format which allows you to draw two-dimensional vector graphics to be used on websites. The graphics are defined in XML format. The scalable aspect lets you resize and zoom without compromising image quality. SVG images can be static or animated. SVG is a W3C standard so it integrates well with other W3C standards like DOM and XSL.
Why use SVG over other image formats?
There are several advantages to using SVG over other image formats like GIF or JPEG. The first advantage is that resizing and scaling an image does not affect it’s quality. This is because an SVG image is drawn as vectors on a coordinate system. When it is scaled, the image is just redrawn and there are no pixilation adjustments necessary like with raster images. This makes for great retina displays on normal setting and when zoomed in. SVG is also an open standard making it easily accessible to everyone. All browsers (except IE8) have SVG support. An SVG image can be searched, compressed and indexed.
SVG Elements and Attributes
The following elements and attributes are the most basic building blocks of an SVG image.
Shapes
Let’s make a SVG pizza!
SVG image code can be written and edited in any text editor. If you don’t want to write code from scratch there are numerous SVG based drawing software such as Inkscape, Adobe Illustrator, and CorelDraw X6 which allow you to create vector graphics without coding. Inkscape is a great open source option. The code below provides a simple example of creating a pizza image using circle and line elements.
<svg width="1000" height="1000"> <circle cx="100" cy="100" r="60" stroke="brown" stroke-width="9" fill="yellow"/> <circle cx="78" cy="90" r="10" fill="red"/> <circle cx="125" cy="125" r="10" fill="red"/> <circle cx="140" cy="102" r="10" fill="red"/> <circle cx="60" cy="120" r="10" fill="red"/> <circle cx="100" cy="60" r="10" fill="red"/> <circle cx="120" cy="80" r="10" fill="red"/> <circle cx="95" cy="140" r="10" fill="red"/> <line x1="60" y1="61" x2="140" y2="140" style="stroke-width:2;stroke:rgb(0,0,0)"/> <line x1="58" y1="140" x2="140" y2="60" style="stroke-width:2;stroke:rgb(0,0,0)"/> <line x1="43" y1="100" x2="158" y2="100" style="stroke-width:2;stroke:rgb(0,0,0)"/> <line x1="100" y1="44" x2="100" y2="157" style="stroke-width:2;stroke:rgb(0,0,0)"/> </svg>
The above code produces this pepperoni pizza. Put the code into the SVG editor and make your own version!
The first line of the code block sets out the area of the drawing. In this case it is 1000 by 1000. The next line creates the pizza by defining a circle of radius 60. The crust is created by setting a stroke of width 9. A fill is assigned to both the stroke and the circle. The next 7 lines of code create the pepperonis. These are all circles of radius 10, positioned at different coordinates. Lastly four lines are created by setting the (x, y) starting point and ending point of each line. A stroke width is set for the line and the color is assigned using rgb values.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.