Have you experience Vecta lately?

Powerful online SVG editor for teams.

Try it for Free now

Everything SVG

Why you need different modes when compressing SVG for inline, object and img tags

May 19, 2020 ·  Thomas Yip · Everything SVG

Why you need different modes when compressing SVG for inline, object and img tags

Chances are, you will either use <img>, <object> or 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 <img>, <object> or inline mode, and because they have different characteristics, their compression mode does matter, and will affect how your SVG displays on your site.

Image mode

SVG embedded using <img> tags are encapsulated, and can be compressed to the max, especially if classes and IDs are used.

Classes and IDs

<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.

Keep reading.....

How to use fonts in SVG

May 15, 2020 ·  Thomas Yip · Web Design · Everything SVG

How to use fonts in SVG

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.

Different ways to embed SVG

You may embed your SVG using inline, object, or img tag, and each of them requires a different approach to embedding fonts, mainly because of limitations for each type of embedding.

Using fonts with inline embedding

For 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>

Styling inline svg with css

You will have to include the fonts on your page, the the browser will automatically load the fonts and render the SVG properly.

Keep reading.....

Convert DXF to SVG with Nano and reduce file size by 90%

May 07, 2020 ·  Thomas Yip · Web Design · Everything SVG · How to Vecta

Convert DXF to SVG with Nano and reduce file size by 90%

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.

A sample DXF converted with Nano
A sample DXF converted with Nano

Converting DWG to DXF

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.

Converting DXF to SVG using Nano

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.

Sample DXF minified by Nano
Sample DXF minified by Nano
Sample DXF converted by convertio.co
Sample DXF converted by convertio.co
Sample DXF converted by cloudconvert
Sample DXF converted by cloudconvert

Comparing file sizes

  • Original DXF: 1.95MB
  • Converted and minified with Nano: 99.2KB (95% savings)
  • Converted by convertio.co: 892KB (55% savings)
  • Converted by cloudconvert: 1.32MB (32% savings)

The winner is clear, Nano not only produces excellent results with dimensions, the file size savings is beyond comparison.

Keep reading.....

vecta.io BETA