• +31(0)570 51 33 83

DnnConsulting Blog

Using SVG files in a Dnn text/html module

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.

        <img alt="DnnConsulting rocket" src="/portals/0/images/svg/rocket.svg />
    

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:

        img { 
max-width: 100%;
height: auto;
}
    

Or

        img { 
width: 20%;
height: auto;
}
    

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

        <object type="image/svg+xml" data="rocket.svg" class="logo">
  Rocket Logo <!-- fallback image in CSS -->
</object>
.no-svg .logo {
  width: 200px;
  height: 164px; 
  background-image: url(rocket.png);
}
    

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.

Resources

  • 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
Geoff Barlow : Dnn CMS addict and Dnn MVP 2014, 2015 And 2016. Owns and runs DnnConsulting, WeHostDnn, emberWeb and cmsXpress.
Total: 0 Comment(s)

Latest posts

The DnnThemeEditor
4/7/2017 2:20 PM | Geoff Barlow
Intro to the DnnContra theme for Dnn
3/11/2017 2:56 PM | Geoff Barlow
Welcome to the FREE DnnMinimalist to the Dnn ecosystem
3/11/2017 2:54 PM | Geoff Barlow
The new Dnn9 Administration User Experience
11/3/2016 1:31 PM | Geoff Barlow
Intro to the DnnMDesign theme for Dnn using Bootstrap 3
5/12/2016 2:08 PM | Geoff Barlow
Using SVG files in a Dnn text/html module
4/18/2016 11:52 AM | Geoff Barlow
Placing social buttons in the DnnBootster theme
4/14/2016 4:30 PM | Geoff Barlow
Changing & creating DnnBootster color schemes
4/7/2016 2:20 PM | Geoff Barlow
Intro to the DnnBootster Skin for Dnn using Bootstrap 3
4/7/2016 2:13 PM | Geoff Barlow

Categories

.WeHostDnn : Dnn Hosting
emberWeb : Web Agency
(Avialable soon)
interschools : For schools
cmsXpress : Internet Solutions

DnnConsulting : The best choice in complete website solutions!

Contact us via email

or phone +31 (0)570 51 33 83