SVG Images

Editor-In-Chief: C. Michael Gibson, M.S., M.D. [1]

What is an .SVG?

A Scalable Vector Graphic (SVG) is an vector image which is constructed through mathematical expressions rather than a bitmap of RBG colors corresponding to each pixel. Because vector images are mathematically defined, they retain their quality no matter the resolution of the monitor on which they are displayed. This means an .SVG image that is displayed at a size of 2 inches will have lines that are just as crisp as an image that is displayed at 4 inches in size. This makes .SVG images ideal for things like text that will be displayed at various sizes. However, because each element of a .SVG image is represented as a mathematical expression, these images are often larger in size than corresponding raster images.

When Should I Use an .SVG Image?

Vector images, such as an .SVG, are not always appropriate, especially for certain web applications. The following is a list of times when a .SVG may be more appropriate than a .JPG, .GIF, or .PNG:

• High image quality is required for monitors in a large range of resoltion, such as both on an mobile device and a TV display
• The file size is not critical. E.g., for uses where the user is expected to have a strong internet connection.
• The image involves text and will be viewed on various types of displays
• The text within the image needs to be searchable

How Do I Place an .SVG on a Page?

The following is a list of steps to allow you place an .SVG in a page on WikiDoc:

1. To use an .SVG in WikiDoc, you must first upload the image to the WikiDoc server. Note the name the file on the server was given. For example, Help-1.svg
2. Go to www.wikidoc.org/index.php?file:<Insert file name here> E.g., www.wikidoc.org/index.php?file:Help-1.svg
3. Right click on the name of the file extension and choose copy link location or link address. The resulting link is the direct link to the image you have uploaded and should be similar to:

Code in MediaWiki	Result
http://wikidoc.org/images/1/10/Help-1.svg

1. Insert the following code where you would like to place your image

Code in MediaWiki	Result
<img src="<YOUR IMAGE URL>" style="width:200px;height:200px;" /> For example, <img src="http://static.wikidoc.org/1/10/Help-1.svg" style="width:200px;height:200px;" />

How Do I Format an .SVG Image?

What it looks like	What you type
A picture:	A picture: [[Image:humanbody.jpg]]
With alternative text:	With alternative text: [[Image:humanbody.jpg|Anatomy]] Alternative text, used when a mouse hovers over the image or when the image is not loaded in a text-only browser, or when spoken aloud, is strongly encouraged.