1. Technology

A Compendium of SVG Information

Written by Posted on Less than 0 min read
0

A huge pile of information about SVG.

How to Use SVG

These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>.

SVG as an Icon System

SVG is particularly good for icons. Besides the resolution independence and styling possibilities, the shapes for icons are generally simple and thus the files size is tiny and can be combined into a single web request like a sprite or icon font.

I’ve written a bunch about this:

SVG Shape Syntax

SVG Patterns

In SVG you can fill shapes with colors and gradients, but you can also specify a <pattern> to fill with. <pattern>s are groups of other SVG elements that repeat, so it’s kinda like putting some <svg> in your <svg>.

About viewport, viewBox, and preserveAspectRatio

The browser window you are looking at right now is a viewport. If there was an <iframe> on the page, that would have its own viewport. So too does <svg>! It’s a little tricky though, because SVG also has a viewBox which is the actual space in which the SVG elements are drawn. That, combined with preserveAspectRatio, determine how and where the SVG are drawn within that viewport.

SVG Gradients

Whereas a fill in SVG is just an attribute (or applied in CSS), SVG gradients are literally a special element like <linearGradient>. CSS has gradients as well, but because SVG gradients (can be) in the DOM, there might be cases where they are easier to manipulate.

Plus they work in IE 9 where CSS gradients do not.

SVG and Fragment Identifiers

The <use> element in SVG allows you to copy a bit of SVG for use again elsewhere. But that only works for inline SVG. If you wanted to use just particular bits inside an SVG file in CSS (background-image) or HTML (<img>), you’ll need fragment identifiers.

SVG Strokes

SVG is all about drawing shapes. Just as in a design program like Adobe Illustrator, you can apply strokes to those shapes as well as fills.

SVG and Text

SVG has a <text> element which allows you to add (you guessed it) text to a graphic. Real, native web text, not outlines of characters, which 1) makes it more useful (selectable, searchable) 2) makes it more accessible 3) keeps the size down. Just like regular web text, the fonts you have available are limited to what is available on a given browser/platform/version or what is loaded via @font-face.

Animating SVG

There are a variety of ways to animate SVG. SVG syntax has an tag specifically for it, although it’s a touch complicated. That’s often referred to as SMIL (Synchronized Multimedia Integration Language). If you’re using inline SVG, you can also target the SVG (or shapes within) with CSS and animate using CSS animations. You can also use JavaScript to manipulate (and thus animate) SVG.

SVG JavaScript Libraries

Organizing SVG

Much like there are HTML tags to organize content, there are SVG tags to organize graphics. For instance, The <g> (group) tag is analogous to <div>. It doesn’t have much meaning all by itself, but it’s useful because it means you can style it and let those styles affect the entire group.

SVG Clipping

You can draw shapes/paths that are used to hide other shapes/paths that are inside/outside of them.

SVG Build Tools

A common way to work with SVG on a site is to have a “folder full of SVGs” that you intend to use throughout the site. For performance reasons, you wouldn’t want to request each one individually. These build tools help combine them together in one way or another.

  • IcoMoon by Keyamoon (select icons you want to use, output just that as SVG sprite. Drag and drop on your own SVG. Save project to update later.)
  • Fontastic also outputs as SVG sprite
  • Filament Group’s Grunticon: Article, Repo, In-browser tool. (Turns a folder of SVGs into SVG data URLs and fallbacks down from there.)
  • grunt-svgstore by Fabrice Weinberg (combine folder of SVGs into SVG sprite)
  • grunt-svg-sprite by Joschi Kuphal (combine folder of SVGs into SVG sprite, with CSS preprocessor output)
  • gulp-svg-sprites by Shane Osbourne (combine folder of SVGs into SVG sprite)
  • iconizr by Joschi Kuphal (lots of features combined)
  • SVG-Stacker by Michael Schieben

Getting SVG to Use

There are a number of ways to get your hands on the SVG you need.

  • Learn the SVG syntax. (see section)
  • Learn to use vector editing software. (see section)
  • Download vector stuff from the internet. Remember anything vector can be turned into SVG (e.g. you might find have an .eps or .pdf, but it has vector stuff in it, so open/manipulate in Illustator, Save As .svg).
    • Everything on The Noun Project is SVG
    • Stock photo sites typically have a way to return only vector search results. (e.g. Shutterstock or Vecteezy)
    • Remember fonts are vector, thus icon fonts are vector, thus any icon in an icon font set can be SVG. (Download and activate font, type character in Illustrator document in that font, convert to outlines, Save As .svg) Here’s a big list of icons fonts by me.

SVG Demos

SVG Filters

There are CSS filters, which allow for familiar things like blur. SVG has its own set of filters (which is where the CSS ones came from) that include those familiar things, but also much more, including weird and unique things more reminiscent of Photoshop filters. SVG filters can be applied to HTML content as well as SVG content.

Data URIs and SVG

One of the advantages of inline SVG can be the fact that no web request needs to be made. The information to draw that SVG is right there. Data URI’s (sometimes “Base 64” encodings, sometimes actual <svg> syntax) also do no-request rendering (that’s the whole point, really.)

SVG and CSS

CSS can affect inline SVG in most of the ways you would expect. But SVG also has its own set of CSS properties unique to it.

Optimizing SVG

It’s very smart to optimize images before use on the web. For raster images, even after you’ve saved at the smallest, lowest quality you are comfortable with, tools like ImageOptim can trim off even more file size without further affecting quality.

That same thing applies to SVG!

SVG Software

Accessible SVG

I’m not an accessibility expert, but from what I can tell, SVG gets a decent nod from the accessibility community. Of course, you still have to do it right.

SVG Talks

There is a lot to talk about! Especially now since the browser support levels of SVG is so ubiquitous these days.

Slides

Talks as Videos

Podcasts

SVG and JavaScript

One of the advantages of SVG is that the shapes are in the DOM. For instance, perhaps a <svg> has a <rect> and a <circle>. Through JavaScript, you could bind an event handler to just the <rect> and a different one to just the <circle>.

SVG Browser Support

SVG is supported in all the current versions of all browsers and several versions back. The biggest concern is generally IE 8 and down, and Android 2.3 and down. But that’s just basic SVG support (inline, <img>, CSS background). There are sub-features of SVG that have different levels of browser support. Can I Use… does a good job of tracking that stuff.

SVG Fallbacks

If you need to support browsers old enough to not support SVG (see the Browser Support section), there are plenty of ways to handle fallbacks to resources that do work (e.g. replacing an image.svg with an image.png or the like).

SVG Specs

The W3C presides over the syntax that guides the implementation of SVG in browsers. SVG 1.1 is final, SVG 2 is in draft.

  • SVG 1.1 (Recommendation Status)
  • SVG Tiny 1.2 (Not really used as far as I know, even though you can export as it from Illustrator. It was intended for stuff like old Blackberry’s)

    SVG 1.2 Tiny is a profile of SVG intended for implementation on a range of devices, from cellphones and PDAs to laptop and desktop computers, and thus includes a subset of the features included in SVG 1.1 Full

  • SVG 2 (Editor’s Draft Status) Apparently will have stuff like stroke positioning (inside, outside, middle).

    This version of SVG builds upon SVG 1.1 Second Edition by improving the usability of the language and by adding new features commonly requested by authors.

Misc

Obligatory random things!

A Compendium of SVG Information is a post from CSS-Tricks

Member since

More from admin

VipsPMV1.2
  1. Technology

Affordable and Flexible Project Management Suite

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Written by
  1. Technical
  2. Technology

OnMobile signs 3 year exclusive CRBT deal with Tata Teleservices

OnMobile Global has signed an agreement with Tata Teleservices to become its exclusive Caller Ring Back Tones (CRBT) partner.  The deal has been signed for an initial three years and as part of the deal, OnMobile will centrally manage Tata’s content management systems across its GSM and CDMA networks. Tata Docomo Marketing head Gurinder Singh Sandhu said that they will […]
Written by
Next
No Comments
Leave a comment
Comments to: A Compendium of SVG Information

Recent Articles

Good Reads

How to Recognize the Quality and Purity of Groundnut Oil

Unlock the Secrets to Identifying High-Quality and Pure Groundnut Oil

Groundnut oil is a popular choice⁤ for cooking⁢ in many households due to ‍its ⁤versatility and health benefits. However, it is important to ensure that the groundnut oil you are⁣ using is of high quality and purity. In this guide, we will discuss simple and practical ways to identify top-notch groundnut oil for cooking, including […]
Written by
lar

Discover Inner Peace: The Spiritual and Healing Benefits of Wearing Larimar

Larimar ‍is​ a ⁣stunning blue gemstone found exclusively in the Dominican Republic, known for ⁤its remarkable spiritual and‌ healing properties as well as its beauty. This captivating stone has long been associated with inner peace, emotional balance, and tranquility due​ to its intricate patterns reminiscent of the ocean and its serene shades of blue. The […]
Written by

Worlwide

VipsPMV1.2

Affordable and Flexible Project Management Suite

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Written by
How to Recognize the Quality and Purity of Groundnut Oil

Unlock the Secrets to Identifying High-Quality and Pure Groundnut Oil

Groundnut oil is a popular choice⁤ for cooking⁢ in many households due to ‍its ⁤versatility and health benefits. However, it is important to ensure that the groundnut oil you are⁣ using is of high quality and purity. In this guide, we will discuss simple and practical ways to identify top-notch groundnut oil for cooking, including […]
Written by
lar

Discover Inner Peace: The Spiritual and Healing Benefits of Wearing Larimar

Larimar ‍is​ a ⁣stunning blue gemstone found exclusively in the Dominican Republic, known for ⁤its remarkable spiritual and‌ healing properties as well as its beauty. This captivating stone has long been associated with inner peace, emotional balance, and tranquility due​ to its intricate patterns reminiscent of the ocean and its serene shades of blue. The […]
Written by
lar

Discover Inner Peace: The Spiritual and Healing Benefits of Wearing Larimar

Larimar is a stunning⁤ blue gemstone‌ found exclusively in the Dominican Republic, known ⁣for its remarkable spiritual and healing properties as well as its beauty. This‌ captivating stone has​ long been associated with inner ​peace, emotional ‌balance, ⁤and ⁢tranquility due to its intricate patterns reminiscent of the ocean and its serene ​shades‌ of blue. The […]
Written by

Trending

A Walk Through The Tucson Bead Show-665623f6

Turquoise Gemstone Jewelry Collection – Rananjay Exports

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Written by
Reliable Packers and Movers in Navi Mumbai-e7e8f17b

Why have reliable packers and movers in Delhi NCR gained popularity in 2021?

24 March 2020, the evening when the Government of India ordered a nationwide lockdown for 21 days. Because the deadly Coronavirus crept into the world and turned it into a sinking ship, put unforeseen pressures on all of us with its destructive intentions. Soon after, it turned into a giant monster. Omicron, the new variant […]
Written by
6-common-mistakes-foreign-investors-make-when-starting-a-business-in-singapore (1)-7dd6c002

6 Common Mistakes Foreign Investors Make when Starting a Business in Singapore

Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
Written by