Creating an SVG version of our logo
Tom, 3rd June 2016
SVGs are awesome! If your image is in SVG format it's a vector (as the name suggests) and will scale beautifully to any size you desire. This is in contrast to a more traditional format such as a .gif or .png which will go blurry once you go past their pre-determined size. The drawback in the past with SVGs was a lack of support, but times move on, and modern browsers (IE9 onwards) are now capable of displaying them. Using SVGs also affords us wondrous possibilities when it comes to HTML5 animations as the elements of the image are target able via CSS, allowing you to animate specific parts of the image.
We recently re-created our logo in SVG format and as you can see from the screenshots below, it's now much crisper as a result, even when the previous gif was displayed at the correct size.
Creating the logo.svg was a breeze.
- First I re-created the logo in Photoshop CC layers. We're lucky in that our logo is just a rectangle and text element, so really quite easy to re-create.
- I then Extracted the assets and saved them in SVG format. File > Extract Assets...
- This then created me 2 separate SVG files, which I combined into 1. Given the simplicity of the SVG code generated, I really didn't need to use Photoshop at all, but for more complicated vectors I think it would be very useful.
- I then tidied things up a bit and added a traditional .gif image file fallback for those users with seriously old browsers. The code I ended up with is shown below:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
width="120"
height="100"
viewBox="0 0 120 100">
<defs>
<style>
rect {
fill: #322f30;
}
text {
fill: #ffffff;
font-size: 60px;
font-family: "Century Gothic";
}
</style>
</defs>
<switch>
<g>
<rect width="100%" height="100%"/>
<text x="2%" y="67%">18a</text>
</g>
<foreignObject>
<img src="logo.gif"/>
</foreignObject>
</switch>
</svg>
So there you have it, you can now play around with the sizing, colours, and other styles right there in the code. Plus you can have fun playing around with the elements with a few animations... Which will be the subject of my next post.
Update: Due to a lack of web font support with SVGs I've changed how the text is generated in the SVG. Rather than use webfonts as in the above I converted the type in Photoshop to a Shape and then exported the path as an SVG.
To convert type to a shape in Photoshop is super easy, just write the text you want to convert, then select the layer and go to 'Type' > 'Convert to Shape'.
Then 'File' > 'Extract Assets' as previously. This generated the path element required. In order to position it where I wanted inside the <rect> element I nested it inside another <svg> element with x and y coordinates which seems to work. Full example code below:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid" width="120" height="100"
viewBox="0 0 120 100">
<defs>
<style>
rect {
fill: #322f30;
}
.text {
fill: #ffffff;
}
</style>
</defs>
<switch>
<g>
<rect width="100%" height="100%"/>
<svg id="group1" x="14%" y="27%">
<path d="M80.402,39.041 C80.402,39.041 80.402,34.198
80.402,34.198 C78.871,36.046 77.153,37.436 75.248,38.368 C73.343,39.300 71.259,39.767
68.998,39.767 C64.979,39.767 61.548,38.321 58.703,35.429 C55.859,32.537 54.436,29.018
54.436,24.875 C54.436,20.817 55.872,17.347 58.742,14.463 C61.613,11.580 65.066,10.138
69.102,10.138 C71.433,10.138 73.543,10.630 75.431,11.614 C77.318,12.598 78.975,14.075
80.402,16.043 C80.402,16.043 80.402,10.863 80.402,10.863 C80.402,10.863 84.003,10.863
84.003,10.863 C84.003,10.863 84.003,39.041 84.003,39.041 C84.003,39.041 80.402,39.041
80.402,39.041 ZM77.392,16.920 C75.228,14.730 72.565,13.634 69.402,13.634 C67.369,13.634
65.493,14.130 63.772,15.122 C62.052,16.114 60.683,17.507 59.667,19.300 C58.650,21.094
58.142,22.991 58.142,24.991 C58.142,26.975 58.655,28.872 59.680,30.682 C60.705,32.493
62.082,33.903 63.811,34.912 C65.540,35.921 67.395,36.426 69.376,36.426 C71.375,36.426
73.269,35.925 75.059,34.925 C76.848,33.925 78.225,32.571 79.190,30.864 C80.154,29.156
80.637,27.233 80.637,25.095 C80.637,21.835 79.555,19.110 77.392,16.920 ZM36.769,40.000
C32.524,40.000 29.306,38.795 27.114,36.387 C24.922,33.978 23.826,31.323 23.826,28.423
C23.826,26.299 24.400,24.387 25.548,22.686 C26.696,20.986 28.610,19.470 31.289,18.141
C29.410,17.174 28.001,15.974 27.062,14.541 C26.122,13.108 25.652,11.571 25.652,9.931
C25.652,8.273 26.152,6.654 27.153,5.074 C28.153,3.495 29.536,2.251 31.302,1.345 C33.068,0.439
34.977,-0.015 37.030,-0.015 C39.031,-0.015 40.884,0.443 42.589,1.358 C44.294,2.273 45.629,3.516
46.595,5.087 C47.560,6.659 48.043,8.308 48.043,10.034 C48.043,11.761 47.586,13.298 46.673,14.644
C45.759,15.991 44.389,17.157 42.563,18.141 C45.155,19.419 47.012,20.878 48.134,22.518
C49.256,24.158 49.817,26.023 49.817,28.112 C49.817,31.047 48.852,33.637 46.921,35.882
C44.555,38.627 41.171,40.000 36.769,40.000 ZM43.226,13.129 C43.863,12.050 44.181,10.967
44.181,9.879 C44.181,8.342 43.553,6.926 42.298,5.631 C41.043,4.336 39.222,3.689 36.835,3.689
C34.726,3.689 32.978,4.306 31.593,5.541 C30.207,6.775 29.515,8.247 29.515,9.957 C29.515,11.649
30.260,13.181 31.750,14.554 C33.240,15.926 34.979,16.613 36.965,16.613 C38.238,16.613
39.440,16.302 40.573,15.680 C41.706,15.059 42.590,14.208 43.226,13.129 ZM43.336,22.531
C41.590,20.882 39.484,20.057 37.017,20.057 C34.376,20.057 32.161,20.908 30.372,22.608
C28.583,24.309 27.688,26.290 27.688,28.552 C27.688,29.951 28.070,31.272 28.835,32.515
C29.599,33.758 30.667,34.716 32.040,35.390 C33.412,36.063 35.002,36.400 36.808,36.400
C39.605,36.400 41.829,35.580 43.479,33.939 C45.130,32.299 45.955,30.383 45.955,28.190
C45.955,26.066 45.082,24.180 43.336,22.531 ZM6.028,4.673 C6.028,4.673 0.000,4.673 0.000,4.673
C0.000,4.673 2.296,0.944 2.296,0.944 C2.296,0.944 9.838,0.944 9.838,0.944 C9.838,0.944
9.838,39.041 9.838,39.041 C9.838,39.041 6.028,39.041 6.028,39.041 C6.028,39.041 6.028,4.673
6.028,4.673 Z" id="path-1" class="text"/>
</svg>
</g>
<foreignObject>
<img src="logo.gif"/>
</foreignObject>
</switch>
</svg>
More from our blog
18a win Netty 2024 award for Activibees.com
29.02.24
We are delighted to announce that 18a has been recognised for its outstanding work in the "Web Design Agency of the Year - UK" category at… Read →
Generating an Effective Content Security Policy with your Laravel React App
27.02.24
I recently had an interesting problem to solve. I'd built a brand new author website on a shiny installation of Laravel 10, utilising its out-of-the-box… Read →
If your WordPress website looks broken, it could be because of this.
15.02.24
WordPress is the incredibly popular blogging-come-full-website platform that powers over 835 million websites* in 2024. It's functionality is extended by plugins, and one such very… Read →