Working with SVG in Fortis: Conventions and Namespace Prefixes

Scalable Vector Graphics (SVG) is a powerful way to create vector graphics for the web. Fortis allows you to work with SVG seamlessly, but there are some conventions and considerations you should be aware of when incorporating SVG into your Fortis projects.

1. Attribute Naming Convention

One of the key principles of Fortis is maintaining a consistent naming convention for attributes. This convention follows the lowercase-dashed format for attribute names. When working with SVG in Fortis, this naming convention remains the same. You should use lowercase and dashes for SVG attribute names just as you would for HTML attributes. For example:

<svg:circle fill="red" cx="50" cy="50" r="30" />

2. Namespace Prefix: svg:

SVG elements and attributes need to be prefixed with svg: in Fortis. This includes the root svg element itself, which should be written as svg:svg. The reason for this prefix is to align with the XML namespacing standards, as SVG is based on XML. The prefix ensures that Fortis recognizes SVG elements correctly.

Here's an example of a simple SVG circle with the proper svg: prefix:

<svg:svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
    <svg:circle fill="red" cx="50" cy="50" r="30" />
</svg:svg>

3. Importance of the Prefix

Using the svg: prefix is important for two key reasons:

a. Avoiding Tag Name Conflicts: Without the prefix, there's a possibility of tag name conflicts between SVG and regular HTML tags. For example, a is a valid tag in both SVG and HTML. Using the svg:a prefix ensures that Fortis can differentiate between the two.

b. XML Compliance: SVG is based on XML, and XML has strict rules regarding namespaces. Properly using the svg: prefix aligns your code with XML conventions, which is crucial for interoperability and compliance.

Additional Babel Configuration

To use the svg: prefix in Fortis, you may need to configure Babel appropriately. Babel is a JavaScript compiler that allows you to use the latest ECMAScript features. You can set up a Babel plugin or preset to enable the colon (:) syntax for Fortis to recognize SVG namespaces.

Conclusion

Working with SVG in Fortis is a powerful way to create and manipulate vector graphics for your web applications. By following the attribute naming convention, using the svg: prefix, and understanding the importance of proper namespacing, you can seamlessly integrate SVG graphics into your Fortis projects. Keep in mind that, due to XML compliance and avoiding attribute conflicts, using the svg: prefix is not just a convention but a necessity when working with SVG in Fortis.