This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.
Storing an SVG image inside CSS
Just like you can store bitmap images in CSS using base 64 encoding, the same is true for SVG.
This can be done either with or without base 64 encoding, but without encoding care must be taken that the SVG string contains no linebreaks and is properly URL-encoded, otherwise special characters like # will cause errors. With base 64 encoding, URL encoding is not required, but the base 64 string will be larger than the original SVG string.
The logo used in this animation came from WikiMedia, and I altered the SVG content to remove its black background. The resulting transparent logo can now be projected over the starfield background.
Dimensions and centering
All dimensions of text and images are specified as percentages and ems, so that the animation works well on any screen size. Vertical centering of elements is done using CSS 3 transforms:
This way, the elements in the animation are centered on the screen even when the screen is resized during the animation.
Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!