Skip to main content

SVG Inline November 2015

I have been going through a lot of my site pages removing the PNG files (though not strictly removing as I have moved them to links in many cases and not img files) and replacing them with inline SVG - the pages now are super fast to load and the pages are fairly light as well and also a lot more colourful and also it gives me a chance to play with a lot of different graphic ideas. So a total win / win

OK, or so you would think.


Looking at the stats for the site (and I have only recently added a package to look at those) I noticed for the first time that there are a lot of people visiting my site (http://www.graphicxtras.com  ) using really old browsers and probably old browsers that don't support inline SVG. MSIE 10 supports SVG but at the same time it does a little bit of hash when it comes to the size / width / height of the inline SVG. Chrome and Safari and Firefox etc do a lot better job.


Examples being Internet explorer 4 or 5 / Netscape / Chrome  14 / Firefox 2.0.0.13 / Opera 7.50 / Safari 1.2.4 / Chrome 4.0.249.11 / Firebird (Old Firefox) / Sony/Ericsson Browser / Msie 5.0 or so .. as well as a lot of visitors using Windows 98 and NT and Windows Vista and MAC OS X 10.4 etc as well as a lot of OS I have hardly heard of and also browsers I am only sort of familiar with. Really staggering. I always try and update fairly soon after any update and keep with the latest versions so it is hard to understand why so many are on so old browsers and OS


Of course they are probably hundreds of reasons such as why I still see so many computers around hospitals etc that are using windows XP etc but I guess in different countries (I have a lot of visits from outside of the UK and US) so perhaps they are not using the most up to date machines or OS. Or perhaps they are just old servers, or robots (?). Still, it did shock me a little.


It does mean that a lot of people probably see my site (about 50% of visitors) as mainly text which is no real problem but if you are coming to the site for the graphics - you probably won't see as much. I think you can get a little bogged down worrying about supporting or setting up fallbacks - though I might be losing a few customers in the process, I just hope not too many.


Hopefully over time people will get the latest OS and browsers and will move up to Windows 10 / Windows 11 / Windows 12 / Mac OS X 10.12 10.13 etc as well as Microsoft Edge and Chrome 36 / Safari 10 etc and then the support for SVG will be there and all the graphics will look good on 4K screens as well as 8K screens or whatever comes along. Surely it is a good idea to keep your browsers etc up to date (if not the OS though I must admit to be a little despairing when it comes to Windows 10 - I still prefer Windows 8.1)


Some of the pages such as for brushes are still very much raster based but even there many of the sets included EPS files so I will be adding more vector images on those as well but there will always be more PNG etc files for those than the shapes and fonts pages.


Comments

Popular posts from this blog

How to create radial speed lines in Krita (for use in Manga etc)

How to create radial speed lines in Krita painting applications (for use in Manga comics, illustrations etc). You can use the powerful assistant tool to draw lines from a particular origin point while using the freehand brush tool in Krita. All kinds of powerful radial speed lines can be created using pencils as well as ink and more by using the assistants in Krita. Here is a quick tutorial as well as a video tutorial on how to do this in Krita. You can vary the background, the origin point, distances, brushes used, the colors used, on layers and much more (as well as add effects etc) http://www.graphicxtras.com/products/krita.htm

How to use art history tool tutorial for Photoshop

Quick tutorial on how to use the art history tool in Photoshop (CC 2018 2017 2015 CS5 etc) Use the art history brush to create the most amazing brush stroke designs in seconds

Spiral custom shapes for Photoshop and modifying them

Spiral custom shapes and modifying them Created 100s of different designs of spirals for Photoshop (though they were created  in Illustrator in most cases as Photoshop is not the best app for vectors) but once you have the shapes, what can you do with them ??? You can use them as is, of course, and simply add them as a pixel fill or path or shape layer Check out the video below relating to modifying a spiral shape using the direct selection tool https://www.youtube.com/watch?v=SRLSRVc4_kA So how can you edit them using the direct selection tool. Well the key is that you use it as a shape layer and modify the anchor points as well as the segments etc and you can move them back and forth to create all kinds of variations of designs which can then be all re-selected and used to define as a custom shape via the edit menu. You can then save that selection as a CSH file and use them in future projects. http://www.graphicxtras.com/spirals.htm On the spirals page you can find a lo