Overview: Using CSS in SVG with iText SDK

Intro

SVG (Scalable Vector Graphics) is an XML-based format for creating vector images. One of its strengths is that it can be styled using CSS. Below, we outline the major ways to define and apply CSS in SVG, along with key considerations when rendering SVG (e.g., to PDF).

Using CSS in SVG can simplify design and ensure flexibility. With iText, you can choose from:

1. Inline Styles: Quick but can become verbose.

2. Internal Style Blocks: More maintainable, local to the SVG.

3. External Styles: Cleaner separation, but depends on renderer support.

1. Why Use CSS in SVG?

• Separation of Concerns: Keep presentational details (like color, stroke, animations) separate from the SVG structure (paths, shapes, etc.).

• Reusable Styles: Define a style once and apply it to multiple elements.

• Simplified Maintenance: Updates to the look-and-feel can be made in one place.

2. Common Methods of Defining CSS in SVG

2.1 Inline Styles

You can place CSS directly in an SVG element’s style attribute:

<circle style="fill: red; stroke: black; stroke-width: 2" cx="50" cy="50" r="40" />

• Pros: Straightforward and self-contained.

• Cons: Can be repetitive if many elements share the same style.

2.2 Internal Styles (Using <style> Tag)

You can embed a set of CSS rules within a <style> element inside your SVG:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <style>
        .symbol {
            fill: red;
        }
    </style>
    <circle class="symbol" cx="50" cy="50" r="40" />
</svg>

• Pros: Allows grouping of multiple style rules in one place.

• Cons: Styles apply only within that specific SVG document.

2.2.1 Styles in CDATA

In some scenarios, CSS is placed within a CDATA section for XML compatibility:

<style><![CDATA[
    .symbol {
        fill: red;
    }
]]></style>

• Note: Ensures the XML parser doesn’t interpret CSS symbols (like braces) as XML markup.

2.2.2 Internal Styles for Animations

CSS rules can also be used to animate SVG elements:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <style>
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%   { fill: lightblue; }
            50%  { fill: darkblue; }
            100% { fill: lightblue; }
        }
    </style>
    <circle class="pulse" cx="50" cy="50" r="40" />
</svg>

• Note: Actual rendering support for these animations varies. iText does not support dynamic SVG rendering as it’s not suited to the PDF output format.

2.3 External Styles (Linked Stylesheets)

Like HTML, you can reference an external CSS file from your SVG. Several approaches exist:

2.3.1 Using an xml-stylesheet Processing Instruction

<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <!-- Content -->
</svg>

• Pros: Keeps the SVG file cleaner and allows style reuse.

• Cons: Some renderers or browsers might not fully support or honor this instruction.

2.3.2 Using a <link> Tag

<svg xmlns="http://www.w3.org/2000/svg">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- Content -->
</svg>

• Pros: Familiar approach similar to HTML’s <link> tag.

• Cons: Though recognized by some renderers, it’s not a universal standard for standalone SVG.

2.3.3 Using @import in a <style> Block

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        @import url(style.css);
        /* Additional local rules here */
    </style>
    <!-- Content -->
</svg>

• Pros: Consolidates multiple style files.

• Cons: Some tools or libraries may not resolve @import correctly.

3. Class and ID Selectors

SVG elements can use class or id just like HTML:

<circle class="myCircle" id="circle1" cx="50" cy="50" r="40" />

You can then reference them in CSS:

.myCircle {
    fill: red;
}
#circle1 {
    stroke: blue;
}

• Pros: Powerful and flexible for targeting specific SVG elements.

4. Considerations When Rendering or Processing SVG

4.1 Fallbacks for Missing or Inherited Attributes

If an SVG shape doesn’t have an explicit fill attribute, some renderers or processing libraries may default to black or might render it invisible. Ensuring that fill and other key properties have an appropriate fallback is important for consistent results across tools and environments.

4.2 Support for Advanced Features

• Animations: While browsers may animate SVG with CSS or SMIL, some PDF-generation or specialized rendering libraries skip or partially support these animations.

• External Resources: Security or sandbox restrictions may prevent fetching external CSS files, or the rendering tool might not implement them.