Commons:Graphics village pump

COM:GVP

WELCOME TO THE GRAPHICS VILLAGE PUMP!

This Graphics village pump aims to be technical support forum for all the local Labs, graphists (graphic artists), and volunteers interested in graphic works, and is a page where graphists and users from all the Labs can talk about graphics, tutorials, graphic software, help to build new Graphic Labs, etc. Also for exchanging opinions, ideas, protocols, and ways of improvement.

To have the opinion of graphists check

Illustration Workshop

Map Workshop

Photography Workshop

Video and Sound Workshop

Start a new topic

**Graphics village pump archives**
Monthly archives
2007	–	–	–	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2008	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2009	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2010	Jan	Feb	–	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2011	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	–	Dec
2012	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2013	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	–	Dec
2014	Jan	Feb	Mar	Apr	May	–	Jul	Aug	Sep	Oct	Nov	Dec
2015	Jan	–	Mar	Apr	May	Jun	Jul	–	Sep	Oct	Nov	Dec
2016	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	–	Nov	Dec
2017	–	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2018	Jan	Feb	Mar	–	May	Jun	Jul	Aug	Sep	–	Nov	Dec
2019	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	–	Nov	Dec
2020	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	–	–	–
2021	–	–	Mar	Apr	–	Jun	Jul	Aug	Sep	–	–	–
Topic-specific archives /GIF thread

Rendering issues[edit]

I'm working on a better version of this infographic, using actual text rather than paths to make the file smaller and translatable. I used Noto Sans. It looks great on Illustrator, but when I upload it to Commons (Test.svg), the text renders as bold and italic when clicked on, and leaves the intended space elsewhere, going off to the side. I then thought of using a different font. "Maybe that'll fix it". I switched to DejaVu Sans Condensed. It now looks serifed when clicked on.

I feel like I'm doing something wrong, and I have the feeling that it's a very simple thing that I just don't know how to do. Both Noto Sans and DejaVu Sans Condensed are supposed to be valid fonts, so that isn't it. I could convert the text to paths, but that's exactly what I'm trying to revert, because I want to make this translatable (the English version of the same infographic is a PNG, tagged with {{SVG}}, that's also used in a couple of non-English articles, so a translatable version could probably be useful).

I'm sorry if this isn't the place where I'm supposed to post this. Help:SVG's discussion page directs here.

--Rubýn (talk) 01:26, 10 March 2023 (UTC)Reply[reply]

@Rubýn: : The first test.svg displays fine in my browser. Perhaps your browser wasn't able to find Noto Sans. The main problem seems to be that Illustrator uses non-standard names for the font-family attribute: 'DejaVuSansCondensed-Bold' is supposed to be 'DejaVu Sans Condensed' with boldness added via the font-weight attribute. TilmannR (talk) 16:12, 10 March 2023 (UTC)Reply[reply]

I try to avoid using CSS classes, because Commons' SVG renderer does not strictly adhere to the standards. And I recommend using the text-anchor attribute to make right-aligned or centered text more resilient to changes in the font metrics.

Here is my attempt: 20230310200405!Test.svg TilmannR (talk) 20:16, 10 March 2023 (UTC)Reply[reply]

@TilmannR: : Thank you so so much! I went in and changed some things on the DejaVu Sans version (I ended up liking that font more) after your first reply and it now looks fine on my end, but you made such a better job with yours than what I could've done (though that one still looks in italics to me, for some reason. Must be my PC, because it looks fine on my phone). I'm still getting familiar with making better SVGs, specially improving them in a text editor after making them in Illustrator, so I missed a lot of things. I'll still keep working in the version I started with to improve it and then upload it to the file (unless you upload your version). Thank you so much for helping me, I actually learnt a lot more than I expected today. --Rubýn (talk) 22:54, 10 March 2023 (UTC)Reply[reply]

@Rubýn:

As TillmanR said, you must use SVG's text-anchor attribute to make left, center, or right aligned text work when fonts are substituted. Adobe Illustrator should give you the ability to left, center, or right align text in its user interface; use it. Do not center text by eye; it will not survive most font substitutions.

Adobe Illustrator also does not break out some font properties; instead it leaves them encoded in the font family name. I do not know if Adobe Illustrator lets users set the properties when it outputs an SVG file. SVG separate properties include font-style (e.g., italic), font-weight (e.g., bold), and font-stretch (e.g., condensed). Sadly, very few fonts support font-stretch.

Adobe's use of complicated font names frustrates font substitutions. Most systems do not know that DejaVuSansCondensed-Bold is a sans-serif condensed bold font. When the Windows font substitution code sees that name, it does not know what to make of it, so it uses the default Times New Roman font, normal stretch, and normal weight. That's how sans-serif fonts become serif fonts. HTML, SVG, and CSS have the notion of some generic fonts. To make sure you display a sans-serif font, use the CSS generic font sans-serif; for a serif font, use the CSS generic font serif. HTML and SVG allow fallback fonts -- that is, if the agent does not have DejaVu Sans, then use the generic sans-serif (font-family="DejaVu Sans, sans-serif"). I do not know if Adobe Illustrator supports font fallbacks.

Font matching is further complicated because different operating systems match different font names. The OpenType font specification lets the font designer specify several names: https://learn.microsoft.com/en-us/typography/opentype/spec/name One system may put the PostScript font name into the SVG file; a second system that reads the SVG may do its font matching using the typographic family name. Even though the two systems may have the same OTF font, the font matcher may not find the intended font because the names do not match.

Glrx (talk) 22:30, 14 March 2023 (UTC)Reply[reply]

@Glrx: I do center and right-align text in Illustrator, but when I export the file and inspect the code, I find that Illustrator, instead of using text-anchors, just places the starting point in a way that makes the text look centered, but it actually isn't. I have to manually correct it (both by adding the attribute and moving the text to the center).

I've never seen an option to separate those properties. I assume that it doesn't let you do that.

I'll also make sure to add those fallbacks, then (I've never seen Illustrator support fallbacks, either). Plenty of times I've seen my SVGs use Times New Roman and I didn't know why. However, sometimes TNR shows even when I specify a font, like in this file I recently uploaded. Does that mean I have to use font-stretch to specify condensed because it isn't finding "DejaVu Sans Condensed" as a font family? Or is it a matching problem like the one you described in the last paragraph? --Rubýn ^(Talk) 00:29, 15 March 2023 (UTC)Reply[reply]

@Rubýn:

Re center and right-align: OMG, Adobe Illustrator should do the right thing. I'm appalled. I thought a lot of Adobe Illustrator users just didn't know about text anchors; I never thought it was an inherent weakness of AI. It also means that small fonts will not be centered because font scaling is nonlinear at small pixel sizes. I did not expect Adobe to make that mistake.

Re font properties. In a way, I did not expect AI to offer the separate properties. Adobe is tied to PostScript, so it leans toward PostScript font names rather than a font-family name with font properties. I wonder if it is different on Windows and Apple machines.

Sadly, that means that Adobe Illustrator may not round trip an imported SVG file: it may turn centered text into left aligned text. Adobe probably believes that everybody should use .ai files rather than .svg files, and that everybody should purchase Adobe's fonts.

My understanding is Windows does font-family matching; it does not examine the font-family name for words such as "regular", "italic", "bold", or "condensed" and attempt to intuit an appropriate font; those words will frustrate any font matching because Windows will think "bold" is part of the font-family name. Windows also matches spaces in the family name: "DejaVuSans" will not match "DejaVu Sans". Your "like in this file I recently uploaded" specifies font-family="DejaVu Sans Condensed". Windows will not find a font-family with that name, so it uses TNR. If you have loaded the DejaVu Sans font, then it would use that font when font-family="DejaVu Sans" is specified but not when font-family="DejaVu Sans Condensed" is specified (it will use TNR). To me, the appropriate specification is font-family="DejaVu Sans, sans-serif" font-stretch="condensed". At one time, I thought font-family="DejaVu Sans, DejaVu Sans Condensed, sans-serif" font-stretch="condensed" would be better, but now I think it is overkill and runs the risk of condensing a condensed font. I've even seen a graphic artist specify a condensed font, get frustrated that the substituted font is not condensed, so they add transform="scale(0.8, 1.0)"; that will condense a condensed font. Now I just recommend CSS generic fonts, normal or italic styles, normal or bold weights, and normal stretch. It's nice when there are many different weights or stretches, but most fonts do not support those alternatives.

For justified text, I would recommend the textLength attribute, but it is not supported on Commons.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 360">
  <path d="M0,0h720v360H0z" fill="#fff"/>
  <path d="M416.249,110.317c0,47.489-37.867,85.993-84.579,85.993s-84.579-38.504-84.579-85.993c0-31.068,16.201-58.285,40.485-73.398-17.695,14.3-29.127,36.99-29.127,62.537,0,43.257,32.783,78.327,73.222,78.327s73.222-35.069,73.222-78.327l11.357,10.861Z" fill="#5c0f8b"/>
  <path d="M315.108,99.456c0,43.257,32.783,78.327,73.222,78.327s73.222-35.069,73.222-78.327c0-25.547-11.432-48.237-29.127-62.537,24.284,15.113,40.485,42.33,40.485,73.398,0,47.489-37.867,85.993-84.579,85.993s-84.579-38.504-84.579-85.993l11.357-10.861Z" fill="#ffb600"/>
  <circle cx="331.67" cy="102.477" r="56.66" fill="#5c0f8b"/>
  <circle cx="388.33" cy="102.477" r="56.66" fill="#ffb600"/>
  <text font-family="DejaVu Sans, sans-serif" font-weight="bold" font-size="113" x="240" textLength="240" y="290">PDC</text>
  <text font-family="DejaVu Sans, sans-serif" font-weight="bold" font-size="12" x="240" textLength="240" y="315">PARTIDO DEMÓCRATICO COSTARRICENSE</text>
</svg>

Glrx (talk) 02:16, 15 March 2023 (UTC)Reply[reply]

@Glrx: Yeah, it's weird that Illustrator doesn't use those attributes. Though it might be because I export the file as an SVG instead of saving it as an SVG. I've seen that there are differences between those two, but I've never stopped to analyze them. Maybe saving as SVG does output text-anchors, while exporting doesn't. I'll have to check that.

In general, I've read that Illustrator isn't really good for SVGs specifically. It's a good general vector program, sure, but I've read around that it actually isn't ideal for SVG-specific work, probably because it's trying to push for the usage of .ai, as you said. Maybe I should make the jump to Inkscape.

Now what's interesting about that file is that now it render with DejaVu Sans Condensed instead of TNR, even while still using font-family="DejaVu Sans Condensed". It didn't do that yesterday, which is why I brought it up in the first place. In the most recent version of that file, I've added sans-serif as a fallback font and used text-anchor="middle" to actually center the text. The reason I used DejaVu Sans Condensed is because it kinda matches the original font, which is Century Gothic. I went through SVG fonts in Meta-Wiki and didn't find anything closer (though it's hard for me to find anything there, honestly). I could've turned it into paths and leave it there, but that makes the filesize larger and I'm not sure how copyright works on typefaces like that, so I rather just use close-enough alternatives that I know are allowed here.

Either way, I now know I should use font-family="DejaVu Sans" font-stretch="condensed" instead of bunching it all together like Illustrator does. I'll also try to avoid specifying fonts when unnecessary. Thank you so much, I appreciate it. --Rubýn ^(Talk) 19:02, 15 March 2023 (UTC)Reply[reply]

@Rubýn:

I would like to know the result of your save as ai-vs-svg test.

Switching to Inkscape may trade one set of problems for a different set.

There is nothing wrong with including Century Gothic in an SVG file. The fallback font list can be font-family="Century Gothic, DejaVu Sans, sans-serif". You should get Century Gothic (the first choice) on your machine, DejaVu Sans (the second choice) on Commons, and other users who have neither font will get sans-serif (the third choice). You could even add Noto Sans to the list.

I don't want people converting text to paths for ordinary text. I understand that graphic artists get frustrated when the appearance changes drastically, the text overruns boundaries, or when they spend a lot of time to get text to line up but then just see a ragged edge. I understand why text gets converted. Even worse is when a graphic artist resorts to a dual system: text is painted as curves but there is hidden or invisible text backing it up. That really confuses people who translate the text and see nothing change.

Glrx (talk) 19:41, 15 March 2023 (UTC)Reply[reply]

@Glrx: My findings were very interesting. I had started writing them out here, but I think it's better to just show you the code:

<!-- THIS FILE WAS GENERATED IN ADOBE ILLUSTRATOR, USING "EXPORT FOR SCREENS" (CTRL+ALT+E ON WINDOWS). *EVERYTHING* BELOW THIS LINE WAS LEFT AS ILLUSTRATOR GENERATED IT. THIS FILE WAS 1915 BYTES BEFORE THIS COMMENT WAS ADDED. -->
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1620 270">
  <text transform="translate(20.063 64.926)" style="font-family: DejaVuSans, &apos;DejaVu Sans&apos;; font-size: 21px;"><tspan x="0" y="0">This line of t</tspan><tspan x="129.312" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="141.863" y="0">xt is supposed to be le</tspan><tspan x="379.712" y="0" style="letter-spacing: -.018em;">f</tspan><tspan x="386.736" y="0">t aligned. It must eithe</tspan><tspan x="626.36" y="0" style="letter-spacing: -.018em;">r</tspan><tspan x="634.625" y="0">: a) not use a t</tspan><tspan x="788.802" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="801.353" y="0">xt-anchor, or b) use t</tspan><tspan x="1023.894" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="1036.445" y="0">xt-anchor=”start” (this is innefficient) </tspan></text>
  <text transform="translate(398.565 141.254)" style="font-family: DejaVuSans, &apos;DejaVu Sans&apos;; font-size: 21px;"><tspan x="0" y="0">This line of t</tspan><tspan x="129.312" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="141.863" y="0">xt is supposed to be cente</tspan><tspan x="419.887" y="0" style="letter-spacing: -.022em;">r</tspan><tspan x="428.06" y="0">ed. It must use t</tspan><tspan x="600.458" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="613.009" y="0">xt-anchor=”middle” </tspan></text>
  <text transform="translate(769.121 213.508)" style="font-family: DejaVuSans, &apos;DejaVu Sans&apos;; font-size: 21px;"><tspan x="0" y="0">This line of t</tspan><tspan x="129.312" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="141.863" y="0">xt is supposed to be right aligned. It must use t</tspan><tspan x="640.551" y="0" style="letter-spacing: -.018em;">e</tspan><tspan x="653.102" y="0">xt-anchor=”end”</tspan></text>
</svg>

<!-- THIS FILE WAS GENERATED IN ADOBE ILLUSTRATOR, USING "SAVE AS..." (SHIFT+CTRL+S ON WINDOWS). *EVERYTHING* BELOW THIS LINE WAS LEFT AS ILLUSTRATOR GENERATED IT. YES, THAT INCLUDES THE EMPTY LINE AT THE END. THIS FILE WAS 998 BYTES BEFORE THIS COMMENT WAS ADDED. -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1620 270" style="enable-background:new 0 0 1620 270;" xml:space="preserve">
<style type="text/css">
	.st0{font-family:'DejaVuSans';}
	.st1{font-size:21px;}
</style>
<text transform="matrix(1 0 0 1 20.063 64.926)" class="st0 st1">This line of text is supposed to be left aligned. It must either: a) not use a text-anchor, or b) use text-anchor=”start” (this is innefficient) </text>
<text transform="matrix(1 0 0 1 397.9651 141.2536)" class="st0 st1">This line of text is supposed to be centered. It must use text-anchor=”middle” </text>
<text transform="matrix(1 0 0 1 768.3823 213.5075)" class="st0 st1">This line of text is supposed to be right aligned. It must use text-anchor=”end”</text>
</svg>

As you can see, "Save as..." and "Export for screens" have two very different approaches for rendering the same image. And neither use text-anchor. At all. Exporting SVGs with text also ends up resulting in larger filesizes. However, this changes when exporting files without text:

<!-- THIS FILE WAS GENERATED IN ADOBE ILLUSTRATOR, USING "EXPORT FOR SCREENS" (CTRL+ALT+E ON WINDOWS). *EVERYTHING* BELOW THIS LINE WAS LEFT AS ILLUSTRATOR GENERATED IT. THIS FILE WAS 609 BYTES BEFORE THIS COMMENT WAS ADDED. -->
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 360">
  <path d="M0,0H720V360H0V0Z" style="fill: #232150;"/>
  <path d="M449.1,269.1l-89.1-58.4-89.1,58.4,58.4-89.1-58.4-89.1,89.1,58.4,89.1-58.4-58.4,89.1,58.4,89.1Z" style="fill: #029939;"/>
  <polygon points="504 180 384.8 204.8 360 324 335.2 204.8 216 180 335.2 155.2 360 36 384.8 155.2 504 180" style="fill: #e40430;"/>
  <circle cx="360" cy="180" r="153" style="fill: none; stroke: #fff; stroke-width: 9px;"/>
  <circle cx="360" cy="180" r="36" style="fill: #fcbe0e;"/>
</svg>

<!-- THIS FILE WAS GENERATED IN ADOBE ILLUSTRATOR, USING "SAVE AS" (SHIFT+CTRL+S ON WINDOWS). *EVERYTHING* BELOW THIS LINE WAS LEFT AS ILLUSTRATOR GENERATED IT. YES, THAT INCLUDES THE EMPTY LINE AT THE END. THIS FILE WAS 908 BYTES BEFORE THIS COMMENT WAS ADDED. -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 720 360" style="enable-background:new 0 0 720 360;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#232150;}
	.st1{fill:#029939;}
	.st2{fill:#E40430;}
	.st3{fill:none;stroke:#FFFFFF;stroke-width:9;}
	.st4{fill:#FCBE0E;}
</style>
<path class="st0" d="M0,0h720v360H0V0z"/>
<path class="st1" d="M449.1,269.1L360,210.7l-89.1,58.4l58.4-89.1l-58.4-89.1l89.1,58.4l89.1-58.4L390.7,180L449.1,269.1z"/>
<polygon class="st2" points="504,180 384.8,204.8 360,324 335.2,204.8 216,180 335.2,155.2 360,36 384.8,155.2 "/>
<circle class="st3" cx="360" cy="180" r="153"/>
<circle class="st4" cx="360" cy="180" r="36"/>
</svg>

Files end up being more efficient when exporting if they don't have text. Though they're still far from perfect. There's some code that could be removed in the exported SVG as to make it even smaller.

I think these findings might be useful for someone out there. Not sure where else to put them, though... --Rubýn ^(Talk) 20:48, 15 March 2023 (UTC)Reply[reply]

@Rubýn:

Thank you for posting this information. My impression of Adobe Illustrator has gone way down.

Help:Illustrator

Glrx (talk) 04:37, 16 March 2023 (UTC)Reply[reply]

Commons:Graphics village pump

Contents

Rendering issues[edit]

Navigation menu