A useful thing I’ve learned recently is how to put together SVGs.

You may know them from the complicated number-laden output of vector art programs.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"  xml:space="preserve" style="enable-background:new 0 0 512 512;">
<g>
	<path d="M460.8,223.7L460.8,223.7l17.1-0.1c0-30.5-6.2-59.8-17.5-86.5c-16.9-40-45-74.2-80.4-98.5c-17.7-12.1-37.2-21.8-58.1-28.4   C301.1,3.6,278.9,0,256,0c-0.1,0-0.3,0...........

turns into….

However! SVG can also be really helpful to do simple image composition that you might otherwise do in a photo editing program. There can be benefits to assembling an image this way–filesize, accessibility, etc.–but it’s also just convenient.

There is some boilerplate we should get in place first. If you want to learn more about it, you can here.

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
         width='400px' height='400px' viewPort='0 0 400 400'>
    </svg>

What can we put in it?

The first useful thing is a rectangle. These are great for backgrounds and such.

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
         width='400px' height='400px' viewPort='0 0 400 400'>
  <rect x="100" y="150" width="200" height="150" fill="rebeccapurple" />
    </svg>

x and y move things around, width and height do what you’d think, and fill and stroke are easy for styling.

Many CSS properties are available as special SVG properties, but if you’re more comfortable, you can set them with inline styles like style="opacity:0.6".

What next? Images! You can shove raster (normal) images into SVGs no problem. In theory they don’t support GIFs, but in practice they do.

Let’s use this cool green marble 88x31 icon base from A.N. Lucas’s Web Lounge and start putting together an icon:

green marble rectangle

Neocities frowns on hotlinking, so you want to make sure you host your own copy of a generic resource like this1.

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
         width='88px' height='31px' viewPort='0 0 88 31'>
  <image href="<path to your image here>" height="88" width="31"/>
    </svg>

Looks the same – but now we can start getting fancier.

Let’s add text!

If you want a webfont for your text, you can supposedly load it like you would in normal CSS with a style section in a defs section like…

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
         width='88px' height='31px' viewPort='0 0 88 31'>
<defs>
<style>
@font-face {
  font-family: ......
}
</style>
</defs>
</svg>

and that will work if you’re using your SVG as a standalone image – but if it’s within a page, you’re going to need to do the same font import in the page’s CSS. For my example, I’m going to use the Pixel font that I’ve already got in this page for the header.

To make it more exciting, let’s add some CSS text-shadow and a pattern to fill the text.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88px" height="31px" viewport="0 0 88 31">
<defs>
<pattern id="gold" patternUnits="userSpaceOnUse" width="416" height="416">
<image x="0" y="0" width="416" height="416" href="<a gold pattern I found on google images and wouldn't use like this for anything serious>"></image>
</pattern>
</defs>
<image href="<your bg image url>"></image>
<text font-size="16px" style="font-family: 'Pixel';text-shadow: 0.5px 1.5px 0px rgba(255,255,255,.4), -0.5px -1.5px 0px rgba(0,0,0,.9);filter: brightness(1.3);" x="15px" y="20px" fill="url(#gold)">Fancy!</text>
</svg>
Fancy!