search

structurizr / ui

UI code for Structurizr Lite, on-premises, and cloud service.
https://docs.structurizr.com/ui
MIT License
38 stars 22 forks source link

Add font definition to exported SVGs #52

Closed juanrferia closed 4 months ago

juanrferia commented 4 months ago

Description

When you see a diagram on structurizr.com, structurizr on-premises or structurizr lite, you can decide on exporting the diagram as a PNG or SVG. When exported as a PNG, the image is 100% fitting the aspect of the diagram I can see in Structurizr. However, when exported as a SVG, the font changes.

Steps to reproduce

  1. Push the [Big Bank plc] example model (or any other one) to Structurizr structurizr.com, sctrucutirizr on-premises or structurizr lite.
  2. Explore any diagram in the UI
  3. Export the diagram as PNG
  4. Export the diagram as SVG
  5. Compare the diagram you see in Structurizr with the one you see exported in PNG and SVG

Expectation: They look like same Actual: PNG is same as the diagram I see in Structurizr, but SVG not: it uses a different font

Screenshot

Structurizr.com: image

PNG Exported image

SVG Exported image

Code sample

No response

Configuration

No response

Severity

Minor

Priority

I have no budget and there's no rush, please fix this for free

More information

No response

simonbrowndotje commented 4 months ago

This is happening because the Structurizr UI is using Open Sans - a web font that isn't installed by default into your OS. The two quickest options to resolve this are:

  1. Specify a standard font (e.g. Arial) via the branding configuration (e.g. https://docs.structurizr.com/dsl/language#branding).
  2. Add the font into the page where you're using the SVG (e.g. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />).

A better longer term solution would be to modify the export to include the following:

<defs>
<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Open+Sans');</style>
</defs>
juanrferia commented 4 months ago

Thanks Simon for your suggestions. I am insterested on the longer term solution you mentioned. Can you give me a bit more information about how to achieve that?

simonbrowndotje commented 4 months ago

I've added some code that will insert the font definition into the exported SVG. I'm not planning an immediate release, so it would be great if you could build from source to test the fix works for you. Thanks!

juanrferia commented 4 months ago

Thank you Simon. I would be happy test it. I'm using Structurizr Lite / on-premises. Can you clarify the right steps to build and test UI code? For now I am using Arial font as the solution 1 you suggested, which is working fine.

simonbrowndotje commented 4 months ago

Can you clarify the right steps to build and test UI code?

Lite: https://github.com/structurizr/lite?tab=readme-ov-file#building-from-source On-premises: https://github.com/structurizr/onpremises?tab=readme-ov-file#building-from-source

juanrferia commented 4 months ago

I think I need to downgrade java version. After executing ./gradlew build I got an error like:

FAILURE: Build failed with an exception.

* What went wrong:
Could not open settings generic class cache for settings file '[...]/settings.gradle' ([...].gradle/caches/7.6/scripts/1fzq2oqivyy0lzdtrwjxfh9pr).
> BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 65

I will try later. Thanks

juanrferia commented 4 months ago

It works! Thanks!