SVG Label CSS

SVG to create printable labels

by JC Wren

HTML

<svg height="11.00in" width="8.50in" style="font-family:Arial;">
    <svg height="1.0000in" width="2.625in" x="0.1525in" y="0.5000in">
        <rect x="0.0000in" y="0.0000in" height="1.0000in" width="2.6250in" rx="7" ry="7" style="fill:blue; fill-opacity:0.1;"></rect>
        <text x="0.1000in" y="0.2000in" style="font-size:smaller;" text-anchor="start">Stage 1</text>
        <text x="1.3125in" y="0.2000in" style="font-size:smaller;" text-anchor="middle">Comp #1</text>
        <text x="2.5250in" y="0.2000in" style="font-size:smaller;" text-anchor="end">Squad 1</text>
        <text x="1.3125in" y="0.4300in" text-anchor="middle" style="font-weight:bold">JC Wren</text>
        <text x="1.3125in" y="0.6600in" text-anchor="middle" style="font-weight:bold">Single Stack / Major</text>
        <text x="1.3125in" y="0.9000in" text-anchor="middle" style="font-size:smaller;">Best Stage Name Ever</text>
    </svg>
    <svg height="1.00in" width="2.625in" x="2.930in" y="0.5000in">
        <rect x="0.0000in" y="0.0000in" height="1.0000in" width="2.6250in" rx="7" ry="7" style="fill:blue; fill-opacity:0.1;"></rect>
        <text x="0.1000in" y="0.2000in" style="font-size:smaller;" text-anchor="start">Stage 1</text>
        <text x="1.3125in" y="0.2000in" style="font-size:smaller;" text-anchor="middle">Comp #2</text>
        <text x="2.5250in" y="0.2000in" style="font-size:smaller;" text-anchor="end">Squad 1</text>
        <text x="1.3125in" y="0.4300in" text-anchor="middle" style="font-weight:bold">Bilal Sinno</text>
        <text x="1.3125in" y="0.6600in" text-anchor="middle" style="font-weight:bold">Production</text>
        <text x="1.3125in" y="0.9000in" text-anchor="middle" style="font-size:smaller;">Best Stage Name Ever</text>
    </svg>
    <svg height="1.0000in" width="2.6250in" x="5.7075in" y="0.5000in">
        <rect x="0.0000in" y="0.0000in" height="1.0000in" width="2.6250in" rx="7" ry="7" style="fill:blue; fill-opacity:0.1;"></rect>
        <text x="0.1000in"...

CSS

/*
**  When printing, we don't want to print the header rules (<hr>) that we
**  use when display in the browser.
*/
 @media all {
    display: none;
}
@media print {
    .page-break {
        display: block;
        page-break-after: always;
    }
    .no-print, .no-print * {
        display: none !important;
    }
}
/*
**  Body defaults to Arial with Sans-Serif as a back-up. All text is
**  centered, except where it's not.
*/
 body {
    font-family: Arial, Sans-Serif;
    width: 700px;
    margin: 0 auto;
    text-align: center;
}
/*
**  Title for each section
*/
 .title {
    font-weight: bold;
}
/*
**  Content section
*/
 #content {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#errorMessage {
    text-align: center;
}

JavaScript

// This is a comment