PP guide to cover pages/Cover pages with SVG

This page will show you, step by step, how to create a cover page for your project using an SVG template. The biggest advantage of creating your cover page with SVG is that you can place and style your title text using html that PPers should already be familiar with, rather than having to learn how to use a whole new app.

For general information on cover pages, or for instructions on how to create them using different software, see the PP guide to cover pages.

What Is SVG?

SVG stands for Scalable Vector Graphics. A vector image is stored as a series of instructions for drawing lines and curves. In an SVG file, these instructions are stored in an XML text file, meaning you can create and edit your image in a text editor. Anyone who understands enough HTML to post-process a project should be able to create a professional-looking image.

The Basic Method

Creating an SVG cover can be as simple as editing a text file. Here's how:

Getting The Template

First you'll need to download the template. You can find it at the end of this article, in the section labeled cover-template.svg.

To use it, copy all of the text in the code window, and paste it into a new text file using your text editor. Save it to your computer with the file extension .svg -- the actual filename can be anything you like. Your file should start with <?xml and end with the closing tag </svg>.

Choosing a Background Image

Because your cover image will look best with a background image, you will first need a blank background. When using this template, your background image should have a width:height ratio of 1:1.6. You will get the best results if the image is scaled to exactly 1600 by 2560 pixels.

Your cover image must be in the public domain. You can use a blank cover image from your project if there is one, or an image from the Blank Book Covers wiki page.

Download or save the file you want to use as a .jpeg image, place it in the same folder as your .svg file, and rename it to blank-cover.jpg.

Editing the SVG File

To create your cover, use any text editor to open the SVG file. It is in xml format file, so it should look familiar to anyone who has worked with HTML. The basic elements of the file are:

• An image tag that references your background image file.
• A set of path and rect tags that draw a box with a white background and a decorative border.
• A set of text tags that will draw your author and title information. These are styled using CSS, just like in an HTML file.

The template includes a few different options, depending on how long your book title and author name are. To choose a different option, just comment out the current version and uncomment one of the others. Fill in your title and author information and save the file.

Viewing the SVG File

Now it's time to see how your file looks. You can do this with:

• Many web browsers, including Google Chrome and Chrome-based browsers like Opera. However, .svg files will not display properly on Safari on MacOS X.
• Most image viewing apps. If you have an app you use to view or convert images from other formats, like Gimp or XnView, it can probably read and display .svg files as well.
• A dedicated vector drawing app. One free, open source app that handles SVG files well is Inkscape.

Note that some apps and browsers (like Safari) think they can open .svg files, but will not be able to open this one because they don't support all of the elements used in this template.

Converting the SVG File

If your cover looks good, all you need to do is convert it from an .svg file to a .jpg or .png to use in your project. If you've downloaded a vector drawing app like Inkscape it can do this; in Inkscape, just select "Export" from the File menu to bring up the file export panel. Choose the format you want and press the save button.

Otherwise, your best bet is whatever software you normally use to edit images, such as Photoshop or Gimp.

Basic Editing

If the text doesn't quite fit in the box, or otherwise looks a little bare, there are a few simple changes you can make right in the text editor to try to fix it.

Editing in the Text Editor

The easiest way to edit an svg file--even if you have a vector editing program like Inkscape--is with a text editor. Make the changes you want in xml or css in the text editor, save, and then reload the file in your viewer to see the changes. If you're viewing it in a browser, just refresh the browser; if you're using Inkscape, select "Revert" from the File menu.

Use a Different Template

The easiest way to change the look of the cover is to change the template you're using. Just comment out the current title or author lines and uncomment a different one. The templates are designed to work well with titles about as long as the sample text that's entered on the template.

Tweak the CSS

The CSS in an SVG file works just like the CSS in an HTML file. The simplest fix, if your text doesn't quite fit, is to change either the font-size or letter-spacing attributes.

Advanced Editing

Once you're comfortable with the file format, here are a few more advanced options you can try.

Change the Font

The template uses Times New Roman as the font for both the author and title. This isn't because it's the best font; it's because it's one of the most widely available across different operating systems.

You can give your cover a distinctive look simply by choosing a distinctive font. Many different fonts are available from sites like dafont.com, including many open source and open license fonts. Remember that your cover will often be viewed as a thumbnail, so avoid anything too elaborate or hard to read. You will be converting your image to a bitmap before posting your book, so there is no need for a reader to have the font installed to use it on your cover.

Because fonts have different sizes and letter widths, you will probably have to make some changes to other aspects of the file to accommodate a new font.

Move or Add Lines

Each line of text on your cover is represented by a TEXT tag. The text tag takes x and y arguments that position it on the cover.

Because the x argument represents the center of the text, you probably won't need to change it. By changing the y argument, you can move the lines of text up or down on the image--for example, to add a fourth line for an especially long title.

You can also target the lines individually with CSS to vary the font size or other attributes from line to line. For example, in a book with two authors, you might have "AND" in smaller text on its own line between the two names.

Move or Resize the Box

If you have a particularly large title that would benefit from a larger box--or if you'd just prefer a different look--you can edit the two tags that create the text box.

The path tag creates the white text box. The arguments are four sets of coordinates that represent the drawing of the box--starting at 200,200 (200 pixels down and from the left) and moving around in order to draw the shape. The simplest change to this box is to change the two numbers currently set to "1000"--this will change the height of the white box. But the syntax is simple and should you wish you could move the box to the bottom of the image, split the author and title into separate boxes, change the background color or opacity of the box, or create a separate box for an image from inside the project.

The rect tag creates a rounded black rectangle inside the white box, creating a decorative border. This tag takes as arguments a width and height and the coordinates of the box's top left corner. By default, it is slightly rounded and 25 pixels inside the white box on all sides. You will need to resize this border if you resize the box. You can also use the title-box-border css to change the appearance of this rectangle, or of course you can remove it completely.

Resize the Image

While the template creates a page of the approved size, in some cases--as when you are adding a title to existing art from the project--you may want to resize the entire page to match an unusually sized background image. The size of the cover is set in the <svg> tag at the beginning of the file--by default it is set to "0 0 1600 2560".

cover-template.svg

Copy and paste the preformatted text below into a text editor and save it with the .svg file extension to get started:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1600 2560">
	<title>DP SVG Cover Generator</title>

	<!-- To create a cover:
		1. Save an image file as a jpeg, named blank-cover.jpg.
		    The file must have a ratio of 1:1.6; it will
		    look best if it is exactly 1600px wide and 2560px high.
		2. Edit the "text" lines below, adjusting the font-size and
		    letter-spacing in the .title and .author fields as necessary.
		    A number of "presets" are available; you can comment out the
		    default title and author lines and uncomment one of the others.
		3. Adjust the CSS as necessary to better fit your title;
		    font-size and letter-spacing are the most useful.
		4. For more detailed instructions, visit the DP Wiki.
	-->
	
	<style type="text/css">
		.title-box{
			fill-opacity: .85;
			fill: #f4f0e8;
		}
		
		.title-box-border{
		fill-opacity:0;
		stroke:black;
		stroke-width:5px;
		stroke-opacity:1;
		}

		text{
			font-family: "Times New Roman";
			fill: black;
			text-anchor: middle;
		}

		.title-big{
			font-size: 175px;
			font-weight:bold;
			letter-spacing: 10px;			
		}

		.title-medium{
			font-size: 100px;
			font-weight:bold;
			letter-spacing: 5px;			
		}

		.and{
			font-size: 75px;
			font-weight:bold;
			letter-spacing: 5px;			
		}

		.author{
			font-size: 100px;
			font-weight: bold;
			letter-spacing: 5px;
		}
	</style>
	
	<!-- import the background image, named blank-cover.jpg -->
	<image height="2560" width="1600" x="0" y="0" xlink:href="blank-cover.jpg"/>

	<!-- Draw a simple text box, with border, for the title and author -->
	<path class="title-box" d="M 200,200 1400,200 1400,1000 200,1000 Z"/>
	<rect class="title-box-border" width="1150" height="750" x="225" y="225" rx="10" ry="10"/>
	
	<!-- 
		Below are several samples that can be used for title and author
		    information. The first is the default. If another sample
		    better suits your project, comment out the default and
		    uncomment one of the others instead.
	-->

<!-- TITLE -->

<!-- Short one-line title -->

<!--
	<text class="title-big" x="800" y="550">HAMLET</text>
-->

<!-- Short two-line title -->

<!--
	<text class="title-big" x="800" y="425">THE MAGIC</text>
	<text class="title-big" x="800" y="600">MOUNTAIN</text>
-->

<!-- Longer two-line title -->

<!--
	<text class="title-medium" x="800" y="400">THE ORDEAL OF</text>
	<text class="title-medium" x="800" y="525">GILBERT PINFOLD</text>
-->

<!-- Longer three-line title -->

	<text class="title-medium" x="800" y="360">A CONNECTICUT</text>
	<text class="title-medium" x="800" y="475">YANKEE IN KING</text>
	<text class="title-medium" x="800" y="590">ARTHUR’S COURT</text>


<!-- Two in one -->
<!--
	<text class="title" x="800" y="380">PROFESSOR TIM</text>
	<text class="and" x="800" y="470">⁓ and ⁓</text>
	<text class="title" x="800" y="600">PAUL TWYNING</text>
	<text class="author" x="800" y="720">GEORGE SHIELS</text>
-->

<!-- AUTHOR -->

<!-- Single Author, Two Lines -->

	<text class="author" x="800" y="805">WILLIAM</text>
	<text class="author" x="800" y="915">SHAKESPEARE</text>

<!-- Single Author, One Line -->

<!--	
	<text class="author" x="800" y="850">THOMAS MANN</text>
-->


<!-- DECORATION -->

<!-- High decoration -->
<!--
	<text class="title-big" x="800" y="675">❧</text>
-->


<!-- Middle decoration -->
<!--
	<text class="title-big" x="800" y="720">❧</text>
-->

</svg>