Powerful online SVG editor for teams.Try it for Free now
May 19, 2020 · Thomas Yip · Everything SVG
Chances are, you will either use
inline to embed your SVG. Do you know that you will need to compress them differently? Read on to find out about the intricacies of using SVG, especially so when you use it as a React component.
Our most popular post describes the various ways you can use to embed SVG on your website, namely
inline mode, and because they have different characteristics, their compression mode does matter, and will affect how your SVG displays on your site.
SVG embedded using
<img> tags are encapsulated, and can be compressed to the max, especially if classes and IDs are used.
<svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="#A" x="20" y="20"/> <use xlink:href="#A" x="40" y="40"/> <rect id="A" x="1" y="1" width="10" height="10" /> </svg>
In the example above, the IDs are compressed to single letters, and if you compress multiple images, all of them will have these compressed IDs. Because you embed using
<img> tags, duplicate IDs and classes will not matter and your SVG will still show well on all pages.
So you have an SVG with some text and would like them rendered with your selected fonts, how do you do that? Read on to find out more on how to use fonts in your SVG.
You may embed your SVG using
img tag, and each of them requires a different approach to embedding fonts, mainly because of limitations for each type of embedding.
inline, the SVG becomes part of your DOM, and therefore can be easily styled with CSS like any part of your HTML. For example, below we have 3 lines of text with different fonts, and we specify the font family using inline attributes.
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="160" stroke="#000" text-anchor="middle" font-size="24"> <g stroke="none"> <text font-family="Roboto Condensed" x="225.5" y="43.42"> This is a Roboto Condensed font </text> <text font-family="Open Sans" x="225.5" y="88.42"> This is a Open Sans font </text> <text font-family="Anonymous Pro" x="225.5" y="133.42"> This is a Anonymous Pro font </text> </g> </svg>
You will have to include the fonts on your page, the the browser will automatically load the fonts and render the SVG properly.
Do you have a need to let your users download a DWG or DXF? The problem is, users can't preview the contents until they download a file, and download a viewer. Plus you may have have several thousands of these CAD drawings. Wouldn't it be nice to show users the contents on your website with low file sizes? Now you can.
The Open Design Alliance makes a very good converter that you can download and easily convert DWG to DXF. However, of the many converters available online that convert DXF to SVG, none of them work very well and results in SVG that is very large, hardly suitable for embedding into websites.
Since we make the world's best SVG compressor at Nano, it make sense to accept DXF and convert it into SVG for embedding. Before compressing by Nano, we also added quite a few optimization to ensure the converted DXF are optimized with far fewer elements than normally produced by other converters.
99.2KB (95% savings)
The winner is clear, Nano not only produces excellent results with dimensions, the file size savings is beyond comparison.