4

I am asking a question about the overall architecture between different projects.

Let's say I want to centralize all icons / images between different projects in a single repository. This means that all projects need to checkout / synchronize with this repository.

I am going to use SVG graphics to make sure that I can dynamically change colors in the source code of my projects. The changing of colors is mandatory and is depending of project + domain logic.

What are advantages / disadvantages of this approach (single repo + SVG graphics)?

The first things which pops into my mind are:

Advantages:

  • single source of truth
  • easy update of all projects
  • decreased repository sizes

Disadvantages:

  • coupling of not dependent projects via a repo
  • potentially complex logic to modify SVG properties (depends on the SVG itself)
  • strong coupling between the images and the projects (the code needs to know the implementation details, in order to change the colors)

Does any body has experience with this approach? What do you think?

Improve this question
3
  • 1
    What do you think? I think you already know the most important advantages / disadvantages, so there is nothing to answer here for us. Note "List of things" - questions don't work well with the Q&A format of the SE sites.
    – Doc Brown
    Commented Apr 26, 2021 at 20:02
  • That is what I see. But maybe other people with more background knowledge can give more and different information?!
    – Michael Tornack
    Commented Apr 26, 2021 at 20:07
  • You are essentially creating a Font for a special character encoding shared across your projects. Perhaps looking at how Unicode handles this sort of thing would help? ie. establishing a Code-point with each code-point mapping to a specific symbol and a "standard" reference. How fonts themselves are rendered might also help, though you can probably skip kerning and the like as you always render just one character. Creating your own "font" rendering engine for these special characters might help. At the very least you only have to write the logic once per language you use it in.
    – Kain0_0
    Commented Apr 26, 2021 at 23:05

1 Answer 1

Reset to default
2

For web applications, consider a third approach:

  1. Keep the SVG images in one place. Those images won't change from project to project.

  2. Apply color changes to SVG images within a specific site through CSS.

This way, you don't need any “complex logic to modify SVG properties” and you don't couple images with projects.

For native applications, the component which displays the SVG images may provide a way to change the elements. If this is the case, use it to change the colors on the fly, based on their CSS classes.

If the component doesn't let you change a displayed element, you may consider modifying the SVG code itself on the fly before passing it to the component which would display the image. The idea is the same: go through the XML, find the classes, tamper with the XML itself to set the colors. Not the most elegant approach, but it works.

Improve this answer
3
  • Same goes for shared JavaScript or images. Don't screw around with a complex version control setup. SVG files are static assets like any other. Put them on a web server, and link to them in an <img> tag.
    – Greg Burghardt
    Commented Apr 27, 2021 at 1:25
  • I like this approach and I will go for that in the Web apps. However, we are having as well some other (native) apps which do not support CSS...
    – Michael Tornack
    Commented Apr 28, 2021 at 18:36
  • @MichaelTornack: I edited my answer to include a section about native applications.
    – Arseni Mourzenko
    Commented Apr 28, 2021 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.