Building SVG Icons for Encapsule.io
Login
-Home
/
-Notes
/
SVG Icons
Code
+Documentation
-Notes
Sitemap
App Design Process
Docs Feature Part #1
SVG Icons
D3js Examples
Just For Fun: Building SVG Icons With inkscape
The inkscape SVG editor application is really cool!

I created the Encapsule.io "blue burst" icon as an SVG while exploring the amazing application inkscape.

Initially I was just screwing around. But later, I decided I really liked the look. So, I dove into inkscape and created a small collection of similar icons to badge Encapsule packages and libraries.

SVG has been around forever and is a mature and stable text file format. Besides being scalable, SVG is generally quite small when compared with a JPG or PNG which makes it attractive for use where size matter (so always). Also, support is solid (and quite fast) with all the major browser vendors providing out-of-the-box rendering of UTF8-encoded SVG text returned by your sever with the Content-Type: image/svg+xml header.

Recently, I decided to test out the scaling performance on this site and added the background image you see behind all pages now. Cool!

Encapsule.io Icon SVG

Note that all of these images are built up from twisted and warped hexagons.

Encapsule.io

Holism App Server Icon SVG

Holism

Holistic App Model & Extension Icon SVG

Holistic

Hrequest HTTP Filter Icon SVG

Hrequest

ARCcore Data Run-time Icon SVG

ARCcore

ARCcore.util Library Icon SVG

ARCcore.util

ARCcore.types Library Icon SVG

ARCcore.types

ARCcore.identifier Library Icon SVG

ARCcore.identifier

ARCcore.graph Library Icon SVG

ARCcore.graph

ARCcore.filter Library Icon SVG

ARCcore.filter

ARCcore.discriminator Library Icon SVG

ARCcore.discriminator

Encapsule Project, Seattle WA
Copyright © 2025 Chris Russell
Sat Apr 19 2025 23:01:50 GMT-0400 (Eastern Daylight Time)

undefined/@encapsule/holism v0.0.10
undefined/polytely-app-runtime v