Please make the diagrams with open source tools

[bmccary]

The source file for the diagrams requires a commercial/non-free application that is only available on OSX.

[jnavila]

We know this. If you happen to know somebody who has this application and can export the pictures to SVG for instance, please proceed.

[bripmccann]

Searched and found some free alternatives (gratis, unfortunately not open source) which can open Sketch files and export SVGs:

• Figma (Windows, macOS, web)

• Lunacy (Windows)

• Photopea (web)

I can at least confirm they each imported and rendered, but I didn't do much beyond that. Only issue I saw was that it tries to use the Menlo-Regular and Menlo-Bold fonts, which seem to be Mac-only.

[YueLinHo]

I tried Figma and Lunacy. They does not fully support Sketch file. For example:

After using Lunacy, I realized the reason why using Sketch file is there are some components are common in use, I mean the Symbols feature .

That could be a huge reason.
Think about changing the color of following symble:
=>
and figure changes:

And all figures using it will be able to benefit from it.

So, I am not sure it is good to use SVG?

use the Menlo-Regular and Menlo-Bold fonts, which seem to be Mac-only.

True. And I replace the font with Bitstream Vera Sans Mono. (cf. #605 (comment))

[YueLinHo]

Note: Lunacy 3.14

[lazarljubenovic]

Why are we not crafting SVGs?

…

On Wed, Mar 13, 2019, 06:18 Yue Lin Ho ***@***.***> wrote: Note: Lunacy 3.14 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1158 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHTnkfHwzruFsEwHwtOVB74p6lx3nTfkks5vWIo9gaJpZM4Z7q3w> .

[jnavila]

That could be a huge reason.
Think about changing the color of following symble:

Factorization of common attributes is perfectly doable in SVG. But, there are great chances that the extracted SVGs would be "flattened" (i.e. every element embeds all its attributes) and we would loose the ability to change the styling.

@YueLinHo could you provide the output svg so that we can check its structure?

[YueLinHo]

Factorization of common attributes is perfectly doable in SVG.

Nice! ^__^

@YueLinHo could you provide the output svg so that we can check its structure?

OK. Will try it later. :-)

[max123kl]

@YueLinHo
As you wrote correctly, the font used is licensed from Apple and not generally available. The font you suggested, "Bitstream Vera Sans Mono," is not suitable for normal typesetting. It is not a proportional font but a monospaced font, which is better suited for texts that should represent a code text. In continuous text, the typeface appears broken because the letter spacing is not harmonious. (See https://www.fontsquirrel.com/fonts/bitstream-vera-sans-mono).

If you're looking for a free font that is similar to the one in the Sketchbook file and whose license also allows free commercial use, you'll find some alternatives e.g.: https://www.fontspace.com/vincenzo-vuono/gravity or https://www.fontspace.com/kineticplasma-fonts/falling-sky.
In addition, the Google Fonts are copyright free (See https://fonts.google.com/?category=Sans+Serif).

@jnavila
As I don't have a Mac available at the moment, I have to open the progit.sketch file with Lunacy (v4.0.3). Assuming it is displayed correctly, I, as a graphic designer, immediately notice some "don'ts", which considerably reduce the display quality of the images.
On the browser page and in the PDF file, the images appear to me rather blurred. I don't understand how this can happen with a vector drawing program like Sketch. Apparently a serious error may have occurred in the workflow.

The initiator of the issue has suggested to use open source software to create the images. From my point of view Inkscape (https://inkscape.org/) would be suitable for this task, it is available for OSX, Windows and Linux. It is also vector-based and you can create your own symbol library, so that a unified design of the images is possible. A small "HowTo" should be enough to explain the workflow to the various authors.
If you like, I can create a new branch in my fork and give some examples for discussion.

[jnavila]

@max123kl the files included in both media are png (the way they were extracted from Sketch), and they were heavily compressed.
Keeping the format in vector shapes would provide better as long as it is suitable for web pages and PDF. SVG is such format.

Inkscape manipulates SVG files, so this would be great. The problem is that up to now, the exports from Sketch were very lousy. Please go ahead with some sample, and if it can be integrated, you could even better provide a full conversion of the images. 👍

[max123kl]

It does not make sense to reconstruct existing images by duplicating the work. In addition, the check for content errors must be carried out again afterwards.

I suggest that we first analyze where the error hides in the workflow and then focus on eliminating it.
As I said I don't have a Mac and the Sketch tool as well, so at the moment I can only refer to the output of the Windows Lunacy tool. Therefore I can only refer to the output of the Windows Lunacy program at the moment. In other words, I'm pretty sure – what I see here isn't what Sketch produces.

In Sketch's online manual, the section "File Formats" (https://www.sketch.com/docs/exporting/file-formats/) explains that data export to PNG, but also to SVG and EPS is possible. It would be very helpful if you could save two images ("local" and "branch-and-history") and the symbol part in SVG and EPS formats respectively. I especially hope for a lot from the EPS format, as it is universally used in professional image processing.
You can send the files to my e-mail address or place them in the "diagram-source" folder.

Regardless of what I said before, I immediately noticed when looking at the progit.sketch file that the constructed diagrams on the individual pages are no longer in vector format, but in bitmap format. Images in vector format can be enlarged losslessly, the quality of the bitmap format decreases, which is particularly noticeable in typefaces.
The images of the *.PNG files in the ./Images folder are almost all 800 px wide. The same figure (local.png) in the progit.sketch file has only 335 px, so it has to be enlarged more than twice. This leads to a significant blur. In addition, they were extremely compressed and also indexed (the color space of the images was reduced from 24 bit to 256 colors). Subsequent sharpening is no longer possible.
Vector files can usually be edited afterwards without loss of quality, which also means that the effort to improve the images would be considerably less, if the data were available in vector format without indexing.

Another question about the symbols and the symbol library in the Sketch file:
Should it also be possible to edit the text within the symbol in the future? At the moment I can't do that - but it can also be a faulty Lunacy output.

[max123kl]

@jnavila
I have reconstructed some symbols with Inkscape.
I have saved the work in four different file variants (https://github.com/max123kl/progit2-de/tree/Figures/diagram-source)
The file test_oneA.svg and test_oneB.svg contains the graphics in original size, whereas ...A.svg was saved as normal SVG and ...B.svg as "optimized SVG" (reduced color gamut). The files test_oneAx2.svg and test_oneBx2.svg contain the graphics in approx. 2.6x magnification. The size of the ...Bx2 file is larger than that of the ...Ax2 file. I have to check this again. But if the result should be confirmed I see no reason to reduce the color gamut to get a smaller memory size.
What can be clearly seen is that the image quality did not suffer due to the magnification.

You see two columns, on the left side I have stayed as close as possible to the original. In the right column I made some small changes. So I lightened or darkened the text a bit to increase the contrast, which improves the readability. In the first row I placed two small color fields behind the graphics in the middle to simulate the background color on the website and the Sketch program.
At the right graphic I made the filling color a bit darker to increase the contrast.

[ben]

OK, I've finally been able to load up the source file in the Sketch editor – I had tried a while ago, and it kept crashing on me. Here's what I understand as the desired outcome:

• Change the diagram font. I'm thinking Roboto Mono here, but I'm open to suggestions. Would something else be better for ebook download sizes?
• Export the diagrams as SVG, and use those in the build path for ebooks.
• Keep some kind of method for updating diagram styles en masse. Sketch provides this, but is there a way to export so that "symbols" are usable in something like Inkscape?

Does that sound correct?

[ben]

The first part of this will be accomplished in #1285.

[jnavila]

I'm interested in the SVG export. If it's flattened, then it's not really useful for future changes, but if they export a structured file (with styles and reused groups) it could be used as our primary source for images.

[ben]

#1285 now covers the first two.