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.

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.

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.

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.

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.

The scenario

Let's assume you have an image with 2 buttons, one that let your users learn more about your products and the other to sign them up.

An image with 2 buttons
An image with 2 buttons

Traditionally, if you have an image that clicks to a single URL, you can wrap the image with an <a> tag:

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.

If you are just starting to give SVG a try, and already have a beautiful drawing at hand, you may expect your SVG to show up exactly as it is in the editor, all sharp and crisp, unfortunately, that may not be the case once embedded on your website.

It’s easy to throw up our hands and say, “Forget about SVG, let’s just go back to the good ol’ PNG!”, but there are actually techniques you could employ to resolve these common problems easily, to ensure you enjoy the benefits of SVG, reduce a ton of bandwidth and make your site load faster.

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.

Optimizing images is crucial for performance

Average bytes per page by content type on average website
Average bytes per page by content type on average website

Depending on who you ask, images constitute 68% of an average website, if there is such a thing as an average website. In terms of performance and speed, optimising images is the lowest hanging fruit, and it makes sense for this post to focus on optimising images.

Serving an image in three sizes using SRCSET has generally been accepted as the norm, but since our website and blog contains mainly illustrations, meaning most of our images can be replaced with vector-based images using SVG, the big question is, can SVG improve page load time, and if so, by what margin?

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.

But there isn’t much literature found in the web about SEO for SVG, which leads us to write this piece to answer these 3 questions:

  1. Will SVG be indexed in Google Image search?
  2. Which way of embedding SVG is best for SEO and what to keep in mind when using them?
  3. What’s the simplest way to get your SVG images optimized for search engines?
Search engines ranking
Search engines ranking

Knowing the fact that Google Image Search in itself is the 2nd largest search engine in ranking right after Google Search (credits to Moz and Jumpshot), there’s a huge opportunity for you to boost your brand’s visibility by doing well in it, all at NO cost!

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.

We made the world's best SVG compressor with Nano, which minifies SVG files 22% smaller than the current industry average. Naturally, we recommend compressing SVG using Nano before embedding onto your web site. However, there are still many more tips you can apply, to ensure Nano generates the smallest SVG.

Updated (2019-01-15): Included avoiding base64 raster images using image tag

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.

Jump right to the CSS order diagram to see how everything works.

Styling methods

There are a myriad of ways you can apply CSS rules to an element, listed by ascending priority (higher priority at the bottom):

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?

If you're using srcset for JPEG images or because of art direction, then this post is not for you, because srcset is the correct way to deliver these images to different devices with multiple resolutions. But if your images can be vector-based, and you're still using srcset, then read on to find out how to drastically reduce bandwidth, and improve productivity with a simplified workflow, by using SVG images.

Problems with using srcset

Using srcset involves a convoluted workflow, a bunch of scripts and normally, a complicated build process.

Keep reading.....

Using fonts in SVG

October 28, 2018 ·  Neel Singh · 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?

SVG fonts is no longer supported by Chrome, Firefox nor IE. To get your fonts showing up well in SVG, it is recommended to use web fonts instead.

Proliferation of high resolution screens drives an increased amount of designers and developers to start adopting SVG in their responsive web design workflow. With the time savings it offers, Vector based graphic begins to gain its spotlight in the tech industry.

Keep reading.....

How to create a customized vector background for your website within 1 minute

October 25, 2018 ·  Yi Qian · Web Design · Everything SVG · How to Vecta

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics?

You can now create a vector background like below for yourself in less than 1 minute!

Snowflakes background in SVG
Snowflakes background in SVG
  1. Open Vecta.io, and create a drawing.
  2. Draw a rectangle, and fill it with the background color you want.
  3. Drop your preferred shape into the drawing, then run the plugin - Scatterer to randomly distribute the shapes around your drawing!
Scatterer plugin
Scatterer plugin
  1. Export your SVG directly, and use it for your website background image right away!
.element {
  background-image: url(snowflakes-vector.svg);
}

Or you can also export as PNG or JPEG and use it directly as your PowerPoint templates, for a much more professional looking presentation.

Keep reading.....

5 Great Reasons you should be using Google Fonts to Design SVG Images

August 30, 2018 ·  Yi Qian · Web Design · Everything SVG

Great typography adds to a great design. But oftentimes, getting a decent custom font to show up properly on screens comes at a price, either with extra effort or compromise in quality or both.
We experimented to find out the best way to work with fonts and came up with a flawless and efficient workflow by using Google Fonts in our design work. Time saving, top notch quality and most of all, simple!

Why Google Fonts?

Has more than 800 open source font families, about enough to forget about Typekit fonts licensing

The best thing about open source is of course, there’s no licensing concerns and its ‘open-door’ accessibility, allowing users to use it anywhere - both on print and web. The domino effect is any application (i.e., Nano) or browsers can access these fonts so it can be used in your SVG, meaning there’s basically no risk of losing your fonts on your website or design.

Gone are the days of having to inform your clients that it's going to cost more because you’re using a Typekit font in your design! With Google Fonts, there’s no explanation required, and no licensing issues to worry upon. Simply download the fonts you need from Google, install and use it straight away in Illustrator! Also, you can easily manage and get all the latest updated fonts from Google using a Font manager like SkyFonts. A HUGE time saver!

Keep reading.....

The Best Way to Export a Web-Ready SVG from Illustrator (2018)

August 29, 2018 ·  Yi Qian · Web Design · Everything SVG

When exporting SVG from Illustrator, you're prompted with many options. So which settings are the best to produce a web-ready SVG?

Illustrator export SVG options
Illustrator export SVG options

A web-ready SVG should help you to avoid problems like:

  1. Inconsistency in fonts displayed
  2. Embedded images in SVG not showing up
  3. Having a giant SVG file size
  4. Exported SVG appears to be different from your original design (breaking images)
  5. Unable to easily edit your exported SVG codes for animations or interactivity

There are 2 main approaches in exporting a web-ready SVG from Illustrator, mainly based on how you're using it on your website:

Keep reading.....

Color selection made easy

July 28, 2018 ·  Yi Qian · Web Design · How to Vecta

Found yourself scratching head to pick a professional looking yet interesting color to give a final touch to your drawings?

We worked some magic and created a color stencil in Vecta, for everyone who needs good colors laid out in their drawings within seconds without googling or installing any extensions.

Material Design Palette stencil in Vecta

Use Vecta’s Material Design stencil to help you get your drawings done faster! It has a full range of harmonious colors based on Google’s Material Design that allows you to pick the colors you need, then apply them directly on any shapes in your drawing. Your font colors will automatically set to be in contrast with your shape's colors too!

Keep reading.....

Comparing SVG and PNG file sizes

May 26, 2018 ·  Thomas Yip · Nano SVG Compressor · Everything SVG · Web Design

You may have heard that SVG have the lowest size while offering the best quality. Is it true? Why are developers still using srcset and generating PNG @ 1x, 2x and 3x resolution? Can you save any bandwidth with using SVG instead of PNG?

Depending on your use cases, SVG can offer anything from 60% to 80% bandwidth savings, higher image quality, faster loading and a simplified workflow.

Why are file sizes important?

We all know that page speed affects SEO (Search Engine Optimization) ranking, and one of the easiest way to ensure our pages load faster, is to optimize our images.

Keep reading.....

vecta.io BETA