Preparing and implementing svgs on the web

Svgs are awesome. They are scalable, small, and you can actually edit the file both visually and in code. This is my current workflow for optimising svgs for webpages.

Visual editing

At the moment I do most of my design work in Figma, even though its svg exports is not the best. I know they are working on it, but at the moment I export the svg from figma and import it into Sketch where I usually remove some groupings and clipping masks and export it out again.

Preparation

How you prepare the svg in your editor is an important part of optimizing your svgs, but there are two quick-fixes you can do before you export that I would recommend:

1. If your shape has any form of transform remove it by selecting the shape in Sketch and go to Layer > Combine > Flatten. Now the Transform should say 0.
2. If you have multiple shapes that visually combines to one shape Combine them by selecting them and going to Layer > Combine > Union|Subtract|Intersect|Difference F.ex. an arrow consisting of a rectangle and a triangle should be combined into one shape for smallest file-size.

Export

How you export and compress your svg are important for the final file-size. The default export from Sketch has a lot of bloat (Hello, <desc>Created with Sketch.</desc>), and we don’t want that in our final files. In Sketch I therefore have the plugin SVGO Compressor installed. It just magically compressses your files when you export as usual.

I have changed the default settings to compress the files even more than the default-setting. To copy my settings you can select Plugins › SVGO Compressor › About SVGO Compressor and then click the Edit SVGO Settings… button. Your default editor will open the svgo.json file, where you’ll be able to tweak the settings. Remove the content in the file and paste this file instead. In my experience it at least halves the file-size from the default settigs. Your milage may vary if you use a lot of masks/gradient etc. but I would recommend testing out tweaking the different parameters. They are very descriptive like cleanupAttrs, mergePaths, removeTitle etc. You can see all the parameters here

Svgomg also exist as a webtool, and even though it works like magic on the svg filesize, it doesn’t change the structure of the svg. If you have unneccesary shapes, masks or shapes that could have been combined you should fix this before exporting. This is probably whats going to save most space.

Manual editing

You’d be surprised how much of a regular svg is not needed. SVGO helps a lot with this, but just to a certain point. Most tools add unnessecary class-names and divs or groups that you don’t need any-more. They are mostly not needed unless you are doing something more complex like controlling your svg via CSS or having gradients or masks. I always recommend opening up your svg-file in your favorite editor and just delete elements that doesn’t seem neccessary.

Attributes

When you export out an svg you usually get a lot of attributes added to the svg like <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >...</svg> but when do you actually need to use them?

xmlns

The xmlns="http://www.w3.org/2000/svg" attribute is

• Required when you used standalone svg (previews or import it via <img /> or CSS.
• Optional for inlined <svg>

xmlns:xlink

The xmlns:xlink="http://www.w3.org/1999/xlink" attribute is:

• Required for image/svg+xml files with xlink: attributes. (like masks and similar.)
• Optional for inlined <svg> with xlink: attributes

version

The version="1.1" attribute is:

• Recommended to comply with image/svg+xml files standards
• Ignored by every user agent.

viewBox

This says a lot of the size/placement of the elements in the svg so this is always needed.

height and width

You don’t need to specify this. If you don’t the svg will take as much space as it is allowed. Much like a regular <img /> without width specified.

grouping

Very often you don’t need the grouping (<g>) of elements if the file is simple, or you are not editing the file any more. If you f.ex. are exporting out an icon with just one shape, the grouping is unnecessary.

fill-rule=”evenodd”

This is often not needed. I recommend trying to remove it to se if it affects your svg. Here is an article outlining how the fill-rule property works.

Implementing on the web

Inline svg

To get the most control of the svgs just copy the code in the svg and paste it into you html/twig/php/react-file and your good to go. I usually change the fill-color to currentColor to control the color better via the color-property in CSS. Other times I just remove the fill-color completely and target it in the css via fill. Or, if I need multiple colors, i might add classnames to each path and shape so that I can target them directly with css.

svg in CSS

There are multiple ways to add an svg to your CSS. Lets take this link with an arrow behind is an example. We can add this multiple ways:

A couple of things to note:

• If you link to the svg-file it’s going to be a new http-requests, and microscopically slower.
• You can directly inline svgs like this:background-image: url('data:image/svg+xml;charset=UTF-8,<svg>{content here}</svg>'); (Link 2). This however doesn’t work very well with some versions of internet explorer. The fix for this is to URI-encode your svg. I use this tool to convert the svg to data URI.
• Another solution is to Base64-encode the svg, but is usually create a larger file than uri-encoding the svg directly.
• You can’t use currentColor or similar when you URI-encode the svg since the browser reads it like it’s a svg that you are linking to. If you want the hover-color of the icon to be the same as the rest of the link I have 3 solutions for you:
  • Link to another colored URI-encoded-svg on hover (Link 4)
  • Use mask-image and use currentColor on the background-color. The support for this is not the best, so use with causion. (Link 5)
  • You could also fake a mask in SVG (basically create a box in the same color as the background, and clip out the symbol from that shape). Again we use the background-image with currentColor. The support for this is much better, but a bit hacky. ¯_(ツ)_/¯ (Link 6)

Useful links:

• svgomg to minify the svgs
• Convert svg to data URI
• SVGO Compressor
• My export settings for SVGO Compressor for Sketch

6 new HTML-elements (I dream of)

As a designer one of my jobs is to recognise patterns. Small design- and code-patterns that get used again and again on every project. Every time I get to a new pattern I stop and ponder how to mark it up. Accessibility is important for me, but I often find it unclear what’s best practice for these patterns.

This is a short list of some elements I wish existed in HTML. By officially becoming HTML elements, these patterns would then be more likely to be marked up for accessibility. They would also be marked up more consistently — and frankly they’d also be easier to talk about, since we’d all use the same names for them.

Filter

The first pattern I think of is an element that filters or sort the rest of the content. You’ve probably used this on a webshop sorting from cheapest to most expensive. Or most popular to least popular. Or to filter by brand. Or color. I think you get the gist. Usually these filters are just marked up with a simple div around them. My proposal is something along the lines of the snippet below, just to make it clearer that some content is filtering another block of content. I guess there should also be some kind of indication if it is filtered or not, but I’m not sure how this is best solved.

<filter for="product-list">
  However you would like to filter the content. Select, radio-buttons etc.
</filter>
<ul id="product-list">
  <li>The content you are filtering</li>
</ul>

Select

“But we already have the <select>-element”. Fair point. I often find myself wishing the Select element was more flexible. Maybe I want to add a flag to a list of countries, or maybe two lines on top of each other like an account-name or an account-number. My proposal here would be that you could actually use spans, images and divs inside the select-element. I guess this could cause headaches for creators of mobile browsers. But they are really smart people. They have created a browser. I guess they will find a way.

<select>
  <option>
    <img src="norway.svg" />
    <span>Norway</span>
  </option>
  ...
</select>

Expanding table

Imagine that you have a list of contacts with information about their names, addresses, telephone-numbers, and e-mails. Now place everything in a regular table and try to make it responsive. Yeah? Struggling, right? One solution is one of these fancy responsive tables, but what I want is to hide the columns that don’t fit on the screen and when you click each row it expands and show the rest. My hack for now is to use a <tbody> for each row and then place two rows inside that. One is the regular row and one is a row with just one column that is hidden but which appears when you click the first row in the <tbody>.

<!-- how I am doing it now -->
<table>
    <tbody>
        <tr>
            <td>Visible</td>
        </tr>
        <tr>
            <td>Hidden until you click on the row above</td>
        </tr>
    </tbody>
    ...
</table>

<!-- how expanding tables could work -->
<!-- thr = TableHiddenRow -->
<table>
    <tbody>
        <tr for="example">
            <td>Visible</td>
        </tr>
        <thr id="example">
            <td>Hidden until you click on the row above</td>
        </thr>
        ...
    </tbody>
</table>

Step-indicator

You are applying for a loan, or maybe you are filling out your tax report or answering a questionnaire. Each page has a lot of fields you need to fill out and every time you click ‘Next’ you hope you are done, but you just get more boxes to tick and fields to type in. Wouldn’t it be nice if there were some kind of common navigation that told you how far in the process you were? My proposal for this is something like <step current="2" of="6"></step>. The idea is that you can place what you want inside of it and style it however you like. The nice thing about this feature is that browsers could indicate subtly that you now are in a flow and how far through you are. Screen readers could for example say “step 2 of 6 of car loan“ reading the steps before the title of the page.

Carousel

Ahh. Carousel. Much hated. Much used. Much badly implemented. I guess there are as many people who know html as there are ways to code up a carousel. You have a wrapper, some content, some arrows maybe, and a navigation showing where you are. Imagine using a screenreader to browse a website and suddenly your screenreader stops midway through reading a description and starts on a new one, and a new one. If we just had some consistent markup this could have been avoided. I have no suggestions for how it would work, but it would be useful.

Expand

One pattern that comes up again and again is expand. An element that when you click it, shows more content. I thought quite a bit about how, in a perfect world, this should be marked up. Then I asked around, and it seems the world is perfect, after all. There actually is an ‘expand’ element being implemented in browsers today. Internet Explorer hasn’t caught up yet, nothing new there, but almost all the newest browser have implemented it:

<details>
  <summary>Read more</summary>
  Text that is hidden and appears when you click read more.
</details>

Do you have any ‘HTML elements’ that you lie awake at night, wishing existed?

Originally published on Medium

How to store your photos?

Let’s talk about how you store your photos. Since you probably don’t use film anymore you need to store them somewhere digitally, and probably not just on your computer. You don’t want to risk all your images if your computer crashes or gets stolen.

I’ve gone through a couple of the cloud-storage solutions out there and compared them with each other.

	Dropbox	Google Photos	iCloud Photos	Amazon Cloud Drive Prime photos	Jottacloud
Good search functionality
Timeline-feature
Albums
Collaborate on albums
Collect family photos with different accounts
Support RAW-format
Displays RAW-files as images
Works with Lightroom
Windows app
Mac app
iOS
Android
Price up to 1 TB/month	€8.25	€9.54	€9.99	€0.95	€9.44
Price over 1 TB/month	€50.00* ∞	€95.38 10TB	€19.99** 2TB	€0.95 ∞	€9.44 ∞

Some findings

• Google Photos is ridiculously expensive (100 times more than Amazon Cloud) if you have more than 1TB of files
• No-one can compete with Amazon Cloud prices
• iCloud and Google Photos have the best search. iCloud is probably a bit better because it has face-recognition
• Google Photos has an amazing Assistant that creates albums, animations and adds filters etc. to your images automatically. It’s actually pretty good!
• The Norwegian Jottacloud is a good competitor to the rest and the only solution that stores it’s files in Norway

My current setup

I sync my iPhone images with iCloud. I store the RAW-images from my camera on a Synology NAS that syncs the images to Amazon Cloud. This way I don’t have to store them on my computer, but has fast access to them at home. I use Adobe Lightroom as my image-organizer and Amazon Cloud more as just file-storage. Since all my pictures are RAW-files I sadly miss out on a lot of the great search-functionality that’s out there.

My dream setup

If Google Photos supported RAW-files and had a regular filesystem (so I could use it with Lightroom) I would pick that. Mostly because I love the Google Photos assistant.

What should I do if I just have images on my mobile phone?

Do you have an iPhone? Sync it with iCloud. It works great, is simple to use and works out of the box. It is however a bit more lock-in solution than Google Photos (and doesn’t have the assistant).
Do you have an Android-device? Sync it with Google Photos.
Are you switching between iPhone, Android or similar? Use Google Photos.

A last little tip

There is a clever app for macOS called Expandrive that can mount a lot of these cloud-solutions as a Network Drive. This way you don’t have to store the files on your computer, but they are accessible in the filesystem. It works great with Amazon Cloud Drive, Google Drive, Dropbox ++.

15 takeaways from cssconfeu 2015 that you can use today

• You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
• Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.

.div-over-img {
    background-color: #2f3138;
    background-blend-mode: lighten;
}

• For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
• By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
• You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
• You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
• You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages. Eks: <HTML lang="no">

HTML[lang="no"] q {
Quotes: '«' '»';
}

• @media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
• Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
• Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
• Flex overwrites width and float, so they can be used as fallbacks.
• To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
• You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
• As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:

@supports(flex-wrap:wrap){
// instead of modernizr
}

• order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.

Tired of minified files when you search through your project?

Are you also tired of having your minified versions of CSS and JavaScript showing up when you are searching through your project?

It turns out there is an easy way to fix this if your are using Atom. Go to Atom => Config and add this to your configuration-file:

ignoredNames: [
  ".git"
  ".svn"
  ".DS_Store"
  ".jpg"
  ".png"
  "app"
  "vendor"
  "dist"
  ".css"
  "min.js"
]

Are you using SublimeText? Go to Preferences => Settings – User and add this to your configuration-file:

"file_exclude_patterns": [
    "*-ck.js",
    "*min.js",
    "*.css"
  ]

I have added *-ck.js because that’s the default output from CodeKit for minified files. I’ve also added all CSS files since I just want to search through my SCSS.