Web Design
How to use fonts in SVG
May 15, 2020 · Thomas Yip
Software Development Director · 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.
Convert DXF to SVG with Nano and reduce file size by 90%
May 07, 2020 · Thomas Yip
Software Development Director · 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.
The best way to make image maps (2020)
May 07, 2020 · Thomas Yip
Software Development Director · 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.
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.
Improving mobile page speed by 200% using SVG and Nano
March 09, 2019 · Thomas Yip
Software Development Director · 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.
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.
Tips for smaller svg sizes
January 05, 2019 · Thomas Yip
Software Development Director · 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.
The definitive guide to CSS styling order
December 12, 2018 · Thomas Yip
Software Development Director · 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.
Responsive images using SVG instead of srcset
December 01, 2018 · Thomas Yip
Software Development Director · 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?
Using fonts in SVG
October 28, 2018 · Thomas Yip
Software Development Director · 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?