SVGs are usually created with high-end graphics editors, such as Adobe Illustrator, Adobe Photoshop, and Sketch (as seen in the image above). There are many others for mobile devices. Each editor works slightly differently, with unique features, but most create the SVG with menu settings. Some only include the bare minimum of tools for SVG files. The better tools can be expensive or difficult to use.
To create an SVG with these apps, create an illustration or graphic, convert it to a vector, and then save it or export it as an SVG. The tools may be different from one app to another, but the process is similar.
You can also import an image in any file format and convert it to an SVG. When converting from a different format to SVG, you might lose some quality in the image. For the best conversion results, you’ll need to convert from a large file with lots of detail. The SVG will display fewer colors, so keep this in mind when converting a different format to SVG.
Pros and Cons of Using SVG
Pros
SVGs are scalable, so they look great at any size. Design them at any resolution and the quality remains the same regardless of the size they’re scaled to. You can resize them without concerns about quality loss. This makes them ideal for any device. They maintain their quality regardless of the size of the screen.
Since they are code, SVGs can display animations. This makes them work well in place of GIFs.
SVGs can include transparency.
Since they can include animations and transparencies, SVGs are versatile. You don’t need multiple file types to display various graphical elements.
Since SVGs are code, their file sizes are small and they’re easy to optimize. Unless they’re using too many, sites usually load faster when using SVG images.
They’re supported by all of the major modern browsers.
The smaller file sizes use less server space.
Cons
The SVG format isn’t supported on the same level as other formats, such as PNG. Older browsers and devices might not be able to display them.
SVGs are more difficult to upload to websites. For example, WordPress doesn’t use SVGs by default. Uploading SVGs to WordPress requires third-party plugins, which can have their own compatibility and security issues.
It can be more difficult to get an SVG to display properly on a website.
Since SVGs are code, they can be vulnerable to software attacks from hackers or contain malicious code.
SVGs are more difficult to create. They require expensive image editing software or software that’s not always as intuitive.
Since SVGs are code, they’re rendered when the page loads rather than loading later in the process. If the page uses too many SVGs, the page could load slower.
They’re not ideal for images with complex shapes and colors, due to then using fewer colors and the difficulty of creating them.
They’re not suitable for social media and email since those platforms don’t always display them properly.
They can be difficult to use.
When to Use SVG
While SVGs are not ideal for every possible use of images on a website, there are times when using an SVG is the best option. They work best for simple graphical elements that don’t require a lot of colors, so they’re not ideal for photographs.
SVGs should be used for simpler graphics. They are great for logos, icons, buttons, graphics, illustrations, charts, graphs, diagrams, and graphical elements with small animations.
Since they scale well, they should be used where retina-ready and responsive graphics are needed the most. They should also be used where simple responsive animations are needed.
What is PNG?
PNG stands for Portable Network Graphics. It’s an older format and it’s the second most common image file type after JPEG. PNG is a raster file type, so it’s made up of pixels. It is similar to most of the common image formats where the image quality depends on the resolution. It supports large color palettes. Most users that have dealt with images online have used PNG files. Let’s look closer at each element.
Portable means that it’s small and easy to use on any platform or device.
Network means that it’s designed to work across networks and the web.
Graphics refers to the fact that it’s an image file. It’s such a popular file type that almost any image editor can work with PNG files.
If though the PNG format is the second most popular after the JPEG format, a PNG is different from a JPEG and has advantages when compared to a JPEG. For more information, see the article JPG vs. PNG: When to Use?
How to Create a PNG