SVG Images: Difference between revisions
| Line 19: | Line 19: | ||
#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 <nowiki>http://wikidoc.org/images/1/10/Help-1.svg </nowiki> | #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 <nowiki>http://wikidoc.org/images/1/10/Help-1.svg </nowiki> | ||
[[image:UploadSVG.png|width: | [[image:UploadSVG.png|width:35%|Right]] | ||
#Insert the following code where you would like to place your image | #Insert the following code where you would like to place your image | ||
<pre><img src="<YOUR IMAGE URL>" style="width:200px;height:200px;" /></pre> | <pre><img src="<YOUR IMAGE URL>" style="width:200px;height:200px;" /></pre> | ||
Revision as of 20:32, 19 August 2013
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:
- 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
- Go to www.wikidoc.org/index.php?file:<Insert file name here>
E.g., www.wikidoc.org/index.php?file:Help-1.svg
- 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 http://wikidoc.org/images/1/10/Help-1.svg
- Insert the following code where you would like to place your image
<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;" />
will result in
