Using SVG files in a Dnn text/html module
What are SVG files?
SVG stands for ‘Scalable Vector Graphics’ and is a XML based vector image format. Image formats like Jpeg, Gif and Ping are raster format. So what’s the different between vector and raster images?
Vector graphic file: uses math to draw thin lines, curves and points. The vector is mostly used for fonts, icons, and logos.
A raster image file: also known as a bitmap, uses hundreds or thousands of very small squares of color information, mostly called pixels. The raster format is used for photos.
Why use SVG files in a website?
The SVG format is infinitely scalable without losing any image quality. This means that it doesn’t matter what size you display the SVG, it will always be of high quality unlike the raster format which will become pixelated if you up size it.
Another reason is that they are created using xml, this means that they are searchable, indexed and compress well.
The file size is normally allot smaller than a raster format image which counts when you are creating as website.
You can style the SVG file with Css and also animate it.
In theory you can create and edit an SVG image with a normal text editor such as NotePad.
The first thing to do.
The first thing you should do is to make sure that you can upload SVG files into the Dnn File Manager.
In your Dnn website navigate to:
Host > Host Settings > click the ‘Other Settings’ tab and scroll to the ‘Allowable file Extensions. Make sure that ‘svg’ is in the list, if it isn’t just add it and then save. Now you will be able to use the Dnn file manager and html editor to upload SVG files.
At present, the Dnn text/html module will not allow you to upload SVG files in the image properties, the way I get round this is to first use the file manager to upload the SVG files then code the html image tag by hand to the path of the SVG file.
I am sure that there is a way to configure this within the Dnn editor, so if there is anyone out there that knows how, please let me know and I’ll add this to the blog post for others to use.
How to use SVG files in Dnn
You can SVG file the same way as images, within the Text/html module of Dnn or any other place which uses the Dnn editor.
There are various ways to use SVG files in your Dnn website, here a couple of ways.
Using SVG files inline
The easiest way to use an SVG file in your text/html module is to just copy the source xml of the SVG file by opening the SVG file in your text editor like Notepad, copy the contents and pasting it directly in your html.
Using this method you will be able to style the SVG with css easily by using the skin.css or container css files for example.
The drawbacks to this method is that your html may become bloated quickly.
Like every image you should optimize the file first before you use it.
Using SVG as an image
If you have an SVG saved in a file, you can directly use it in an ‘<img>’ tag.
This is my preferred way of using SVG files in Dnn. To control the height and width of the file I usually write some css so that it is responsive:
To scale down the SVG
The downside to this method is that you cannot use Css from another file ( you skin or container Css, for example)
Using SVG as an object
You can embed the SVG as an object using the '<object>’ tag
This method will work great with caching but again you will do be able to use external Css stylesheets but you will be able to use the <style> tag inside the SVG file itself.
There are other ways to use SVG files in your Dnn website like Data URI’s etc., but I just wanted to stick to the easiest ways for you to use right now. Below you can find some resources to get you started. They include links to a free SVG editor which I use to edit my SVG files, a website where you can download SVG files for free and a site that you can optimize your SVG files.
Check them out and if you have other links that you find useful, email me and I’ll add them to the list.
- Inkscape, a SVG vector editor, this is what I use for editing SVG file it is free and simple use
- SVG optimiser, an online SVG optimizer
- FlatIcon, a great resource for free, open source SVG files