Web Design

How to use fonts in SVG

May 15, 2020 ·  Thomas Yip · Web Design · Everything 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.

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

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.

Keep reading.....

The best way to make image maps (2020)

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

Do you have an image with 2 or more buttons that clicks to different destinations. Still using image maps with javascript plugins? Read more to find out how to create responsive image maps the easy way.

Keep reading.....

5 Most common problems faced by SVG users

May 14, 2019 ·  Yi Qian · Web Design · Everything SVG

As SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world.

Keep reading.....

Improving mobile page speed by 200% using SVG and Nano

March 09, 2019 ·  Thomas Yip · Web Design · Everything SVG · Compressing SVG

According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation to your revenue.

Keep reading.....

Best practices for SVG SEO in Google Image

January 14, 2019 ·  Yi Qian · Web Design · Everything SVG

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter are already using SVGs in their website (similartech.com). As SVG usage trend goes upwards, there will be more webmasters transitioning from PNGs to SVGs, because really what's not to like about SVG? Less work done with optimal image performance, favoring both users and businesses.

Keep reading.....

Tips for smaller svg sizes

January 05, 2019 ·  Thomas Yip · Web Design · Everything SVG

You fire up your favourite editor and produce SVGs but found their sizes to be bigger than expected. Is there anything you can do to reduce SVG file sizes? Read on to find out how to reduce SVG sizes to a bare minimum.

Keep reading.....

The definitive guide to CSS styling order

December 12, 2018 ·  Thomas Yip · Web Design · Everything SVG

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

Keep reading.....

Responsive images using SVG instead of srcset

December 01, 2018 ·  Thomas Yip · Web Design · Everything SVG

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcset. The entire process is convoluted and time-consuming, but is there a better way?

Keep reading.....

Using fonts in SVG

October 28, 2018 ·  Thomas Yip · Everything SVG · Web Design

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with the intention to allow designers to design SVG graphics with any fonts they like and have them showing up correctly on the browser. But 18 years later, how is the support for fonts in SVG and what's the best practice for getting fonts to work properly in SVG?

Keep reading.....

vecta.io Early Access