Wikipedia describes SVG in this way: Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Yes, that’s right, an SVG file is actually an XML file. You can open it in a text editor and see the XML tags. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.
All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have at least some degree of SVG rendering support.
If you are looking for some small simple SVG icons for your website or project you can have a look at feathericons.com. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and usability. If you open these files with Inkscape you can export these files as a PNG file that has a transparent background.
Another popular format is PNG. The SVG format is perfect for the web since it’s widely supported by modern browsers. It’s also an ideal format for print since it’s vector based. PNG is great in many cases and works with most software including Powerpoint.
ASP.NET
You can use svg graphics in your ASP.NET web application. If you are using Core 2.0 and you create an MVC project, you will have 4 banner svg graphic files in the wwwroot/images folder. You can test this by replacing the banner1.svg file with your own svg graphic. How do you do that?
- Create your SVG file
- Open the banner1.svg file and replace the <svg> element with your code
How do you get an svg file? You can convert many types of graphic files into an svg format. For example, if you have a png file, you can use a program called Inkscape to open that file and then save it in SVG format (Save As). Once you have that, you can open the svg file in a text editor. Copy the <svg> element from the stat tag to the end tag and paste it over the banner1.svg that comes with the default installation of ASP.NET Core 2.0.
Inkscape does much more that change file formats. In fact, it has many of the features that Adobe Illustrator has and is free. To learn more you might want to check out a YouTube video series on Inkscape starting with the video Inkscape Lesson 1 – Interface and Basic Drawing.
The image size of the banners you get with ASP.NET Core 2 MVC is 1140 by 360 pixels, so if your image is a different size it will be shown as that size in the application and will look obviously out of place when you run the program. This is because the four graphic files rotate in a carousel.