CSSound Nightmares

A learning experience this week made it’s way over from the oh so sensitive mixing board. In essence patience ran thin and blood boiled up until a friend routed out the problem point…not the mixing board. As of right now a similar experience is rearing it’s head for the main site #righttoradio.com¬†and I’m glad my gut reaction was not to rip it to shreads. (Although technically speaking in the process of tweaking it, I did backup and delete the main site).

What am I dealing with? CSS and SVG images. For those not familiar with the .svg format as opposed to .pngs and .jpgs this format is especially gracious when it comes to the internet and modern websites today because it is a “scalar vector graphic”, meaning the file is size independent. The format essentially describes HOW the image is drawn out with polygons as opposed to what pixels to color in. It also conforms to websites in another way, in that svgs are described with xml, the same format for html and also “styled” or colored in with css. This gets really cool and tricky because it essentially allows the designed and programmer (both me in this case) of the website to directly manipulate the image in the exact same way they’d manipulate the looks of a website. This becomes especially awesome because the styles can be programmatically controlled with javascript. SVGs¬†however present a certain conundrum, while they may scale, always look incredible at any size, they don’t save space data-wise for the user. For highly detailed images SVGs do not match up to older compressed formats because they’ve been optimized for a particular size, and the data (as xml) is clunky and takes up a considerable amount of space per polygon. Essentially SVGs is a one size fits all solution, but as a one size fits all solution it means the format is always essentially downloaded at its highest quality and size and can increase how long it takes to download the entire site. The frustrating element is this, it is fast to break apart an .svg into it’s smaller polygonal components, but placing the parts back together with css is snapping a few circuits in my head, and what I was attempting to do was to load balance different sections of the image so it could be used elsewhere. Now all of this wouldn’t be difficult, but the configuration of the server I use requires a restart to update resources embedded into the theme of site.

So right now it’s a lot of slow and progressive guesswork to get everything to look ok. The obvious solution is, move the website elsewhere so that all the changes I make are instantaneous and smooth on my end while producing the all together optimized website. This may not happen for quite a while.