SVG Image Support with Customizable Colors

Sergi Fernández · 2024-11-05T17:53:43+00:00

There was an error rendering this rich post.

Objective: Enhance image integration in Board by supporting SVG file types and allowing color customization of SVG elements.

Currently, developers can add various image formats to their screens, but the lack of SVG support limits flexibility and adaptability. SVGs are vector-based images, ideal for high quality and scalability across different applications. Supporting SVG files would enable developers to integrate detailed graphics and icons that maintain clarity regardless of size.

Key Features of the Proposal:

SVG File Support: Allow developers to incorporate high-quality, scalable visuals.
Color Customization: Enable developers to override the default colors within the SVG. Each SVG contains HEX color codes, and a color picker could be offered for each unique color, allowing direct customization in the label object to align with branding or design preferences.

This enhancement would significantly increase the versatility of visual elements in Board, benefiting developers looking for consistent and customizable design options.

Find more posts tagged with

Open For Voting

Screen Design

User Experience

Board 14

Status: Open For Voting

Comments

Helmut Heimann

Hi @Sergi Fernández ,

I like your idea of color customization that would put forward Board's abilities in color handling. But regarding the SVGs: what is the advantage in your proposal versus the current possibility to import SVGs as Map objects?

Best,
Helmut

Sergi Fernández

Hi @Helmut Heimann, thank you for the comment!

The advantage here is that SVG Map objects are mainly for data display rather than simple visuals, like icons. To display a single icon, developers would need to set up an entire layout, which isn't efficient. This idea would be more similar to uploading images to the capsule or using predefined icons within label objects, making it simpler and more versatile for quick visual elements.

Here’s a real-world example:
In a recent project, a client had an SVG logo in blue tones that they wanted on a blue navigation bar—making it unreadable. I had to manually edit the SVG colors to white, convert it to PNG, and then use it in Board. They also needed a gray watermark version for other screens, requiring further adjustments.

Direct color customization for SVGs in Board would save time and simplify these adjustments.

Best regards,

Helmut Heimann

Hi @Sergi Fernández ,

yeah, but isn't that what your second idea (https://community.board.com/discussion/18531/custom-svg-icons-in-labels) is about?

Best,
Helmut

Sergi Fernández

Hi @Helmut Heimann ,

They can appear quite similar, but I intended to reflect something different in each idea.
This idea focuses on capsule images, which currently only support JPG, PNG, and GIF file formats.

The other idea focuses on the shapes instead of capsule images. It's about increasing configuration options (alignment & colors), adding more predefined shapes, and allowing developers to add custom groups and shapes to the predefined catalog.

I'll edit the ideas to try to make this difference clearer.

Thank you for the feedback! Best regards,

Carlos Eduardo Meneses Maran

I'd like to add that SVGs are part of the current standard for providing better web services. They're usually lighter than other similar formats and scalable without losing quality. It would be interesting we could manage them in Board.