DID YOU KNOW – You can export SVG files from Illustrator & add CSS classes to match your site CSS

Exploring Export Options for Web Developers: SVG and CSS Styling Techniques

As a web developer, managing the design and styling of your assets is essential to ensure consistency and ease of maintenance across your projects. One common format that is both flexible and efficient for web use is SVG (Scalable Vector Graphics). Today, we’re diving into how to export designs as SVGs, modify their styling, and leverage the power of CSS to enhance the way we work with these assets.

Exporting Your Design as an SVG

Let’s start with a basic example. Imagine you’ve created a design, say, a graphic illustrating the six levels of cognitive learning. The first step is to export your design to SVG format, which is ideal for web use due to its scalability without losing quality.

  1. Exporting the SVG:
    • In your design tool, go to the File menu and select Export.
    • From the export options, choose SVG.
    • Save the file with a descriptive name like “design1” so it’s easy to identify.

Now that you have your SVG, let’s take a closer look at what’s inside the file.

Understanding the SVG Code

The beauty of SVG is that it’s a code-based format, which means it’s fully customizable. If we open the exported SVG file, we see that it consists of XML code, with different elements representing parts of the design. For instance:

  • Polygons represent shapes like rectangles or triangles, which define the structure of your design.
  • Text elements define any labels or descriptions.

Each element, such as a polygon or text, has attributes like fill (for color), opacity, font-size, and font-family. These can be styled directly in the SVG or manipulated externally via CSS.

Changing Presentation Style

Let’s dive deeper into how we can manage the styling of SVG elements. By default, many SVGs define styles using inline attributes like fill or stroke. However, this can quickly become cumbersome as the design grows.

To make the code cleaner and more manageable, we can switch to using presentation attributes. This allows you to apply styles directly to individual SVG elements, making the code more readable.

  • In the design file, you’ll find that elements like polygons have inline style attributes (style="fill: #ff0000;") instead of the fill property within the SVG tag itself.

If we switch to inline styles, each element is directly styled, as shown in the example:

<code><polygon style="fill: #ff0000;" points="..."/>
<text style="font-size: 14px; font-family: Arial; opacity: 0.8;">Text here</text></code>Code language: HTML, XML (xml)
This approach makes it easier to adjust individual properties directly within the SVG.

Going Further: Adding CSS Classes

For greater flexibility and cleaner code, we can introduce CSS classes into the SVG elements. This is where things get really interesting.

By using internal CSS, you can define styles in a <style> block within the SVG file. For example:

<code><style>
  .cls-1 {
    font-size: 24px;
    fill: #333;
  }
  .cls-2 {
    fill: #ff0000;
  }
</style></code>Code language: HTML, XML (xml)

In the SVG code, each element can be assigned a class, like so:

<code><polygon class="cls-2" points="..."/>
<text class="cls-1">Text here</text></code>Code language: HTML, XML (xml)

Now, instead of inline styles, the design elements are linked to specific classes, allowing you to manage their styles centrally in the <style> block. This makes the code much cleaner and easier to maintain, especially when you need to make global adjustments.

How to Modify and Customize Styles

Once the classes are in place, you can easily modify the appearance of your SVG by changing the corresponding CSS properties. For example, using an online editor like JSFiddle, you can dynamically adjust values such as font size, color, or opacity. Here’s how it works:

  1. Paste your SVG code into a tool like JSFiddle.
  2. Adjust the CSS properties, such as changing the font-size for a specific class.
  3. See the changes applied instantly to your design.

This approach is incredibly powerful because it allows you to experiment with different styles in real-time and ensure that the design integrates seamlessly into your website’s overall look and feel.

Benefits of Using CSS in SVGs

  • Cleaner Code: By using CSS classes, you significantly reduce the clutter in your SVG file, making it easier to manage.
  • Consistency: CSS ensures that the same styles are applied uniformly across all instances of similar elements, improving the consistency of your design.
  • Customization: You can easily tweak the styles for individual elements, which is particularly useful when working with dynamic content or interactive designs.
  • Flexibility: CSS allows you to change properties without altering the SVG file itself, making it easier to maintain and update your designs.

Conclusion: Plan Ahead for Consistency

When working with SVGs in web development, planning your design and styling strategy is crucial. By leveraging the power of SVG export, presentation styles, and CSS classes, you can create cleaner, more maintainable code that enhances the performance and visual appeal of your website. Whether you’re working on static designs or dynamic, interactive content, mastering these export options will help you build scalable, consistent, and easy-to-manage web assets.

With careful planning and the right tools, you can streamline your design workflow and ensure that your SVG assets integrate seamlessly into your website, providing a smooth and polished user experience.