sharp
sharp copied to clipboard
Published
20 hours ago •
lovell
lovell
I wish to generate text using svg images
Question about an existing feature
What are you trying to achieve?
I am trying to create a jpg by changing a text. When I specify a font-family, sharp generates the text weirdly with misaligned spacing and thin lines. If I don't specify a font family and use the default; everything works well
When you searched for similar issues, what did you find that might be related?
https://github.com/lovell/sharp/issues/1565
At the moment, I don't even understand how fc_config ties in with all these. I use windows and I have set fontconfig_path as well as fc_debug but it changes nothing; the text renders but it looks weird
Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question
<text fill="#D2DCE6" xml:space="preserve" style="white-space: pre" font-size="64" letter-spacing="0em" text-anchor="middle" ><tspan x="50%" y="207.943">Adam</tspan></text>```
SVG text in question.
The svg is imported as a string and fed to sharp, I have tried it without unlimited and density, same result. Also used font-face and classes and basically a hundred things. I really don't understand how I'm supposed to go about this.
It works flawlessly if I open the svg by itself, once I feed it to sharp; all the text goes wonky.
const img = sharp(Buffer.from(svgString), { unlimited: true, density: 1700 }); // console.log(img); img.toFile("output.jpg", function (err) { }); const resized = img; resized.toBuffer((err, data) => { try { console.log("receiving image"); console.log(data); // console.log(data, "here", err); uploadImageToS3(data, urlPath); } catch (err) { console.log("Error", err); } });
### Please provide sample image(s) that help explain this question
Opening on my pc
<img width="224" alt="image" src="https://user-images.githubusercontent.com/37752943/181012431-b194fe54-83f6-4643-a631-49575f90aa07.png">
The png file after using sharp
<img width="224" alt="image" src="https://user-images.githubusercontent.com/37752943/181012693-45ca20b2-ea7e-4fcc-8f5f-b83135a1aa56.png">
Please can you provide the complete SVG, including the font-family attribute, as it looks like the example pasted above is only a partial file.
Thanks
<svg width="300" height="396" viewBox="0 0 300 396" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- <defs>
<style type="text/css">
@font-face {
font-family: Sahitya;
src: "./../../fonts/Sahitya-Bold.ttf";
}
</style>
</defs> -->
<rect y="0.0124969" width="300" height="395.987" fill="#414243"/>
<mask id="mask0_105_28" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="300" height="396">
<rect y="0.0124969" width="300" height="395.987" fill="#1D5270"/>
</mask>
<g mask="url(#mask0_105_28)">
<ellipse cx="301.5" cy="213.044" rx="65.5" ry="65.6637" fill="#29898B" fill-opacity="0.6"/>
<ellipse cx="249" cy="54.6488" rx="41" ry="40.6012" fill="#DFE0E1" fill-opacity="0.4"/>
<ellipse cx="25.5" cy="374.446" rx="65.5" ry="65.6637" fill="#29898B" fill-opacity="0.6"/>
</g>
<text fill="#D2DCE6" xml:space="preserve" style="white-space: pre" font-size="64" letter-spacing="0em" font-family="Sahitya" text-anchor="middle" ><tspan x="50%" y="207.943">Toodles</tspan></text>
<path d="M272.232 111C272.917 108.886 275.908 108.886 276.593 111V111C276.899 111.945 277.78 112.585 278.774 112.585V112.585C280.996 112.585 281.916 115.433 280.12 116.741V116.741C279.317 117.326 278.98 118.364 279.286 119.309V119.309C279.971 121.421 277.556 123.187 275.762 121.88V121.88C274.958 121.294 273.868 121.294 273.064 121.88V121.88C271.269 123.187 268.855 121.421 269.539 119.309V119.309C269.845 118.364 269.509 117.326 268.706 116.741V116.741C266.91 115.433 267.83 112.585 270.052 112.585V112.585C271.045 112.585 271.926 111.945 272.232 111V111Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M41.2323 31.8022C41.9174 29.6884 44.9079 29.6884 45.593 31.8022V31.8022C45.8994 32.7474 46.7802 33.3875 47.7738 33.3875V33.3875C49.9958 33.3875 50.9157 36.2352 49.1196 37.5434V37.5434C48.3167 38.1281 47.98 39.1669 48.2862 40.1118V40.1118C48.9708 42.2238 46.5562 43.9897 44.7616 42.6826V42.6826C43.9577 42.097 42.8677 42.097 42.0637 42.6826V42.6826C40.2692 43.9897 37.8546 42.2238 38.5391 40.1118V40.1118C38.8453 39.1669 38.5086 38.1281 37.7058 37.5434V37.5434C35.9097 36.2352 36.8295 33.3875 39.0515 33.3875V33.3875C40.0451 33.3875 40.926 32.7474 41.2323 31.8022V31.8022Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M153.232 53.8572C153.917 51.7434 156.908 51.7434 157.593 53.8572V53.8572C157.899 54.8024 158.78 55.4425 159.774 55.4425V55.4425C161.996 55.4425 162.916 58.2902 161.12 59.5984V59.5984C160.317 60.1831 159.98 61.222 160.286 62.1668V62.1668C160.971 64.2788 158.556 66.0447 156.762 64.7376V64.7376C155.958 64.152 154.868 64.152 154.064 64.7376V64.7376C152.269 66.0447 149.855 64.2788 150.539 62.1668V62.1668C150.845 61.222 150.509 60.1831 149.706 59.5984V59.5984C147.91 58.2902 148.83 55.4425 151.052 55.4425V55.4425C152.045 55.4425 152.926 54.8024 153.232 53.8572V53.8572Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M229.232 111C229.917 108.886 232.908 108.886 233.593 111V111C233.899 111.945 234.78 112.585 235.774 112.585V112.585C237.996 112.585 238.916 115.433 237.12 116.741V116.741C236.317 117.326 235.98 118.364 236.286 119.309V119.309C236.971 121.421 234.556 123.187 232.762 121.88V121.88C231.958 121.294 230.868 121.294 230.064 121.88V121.88C228.269 123.187 225.855 121.421 226.539 119.309V119.309C226.845 118.364 226.509 117.326 225.706 116.741V116.741C223.91 115.433 224.83 112.585 227.052 112.585V112.585C228.045 112.585 228.926 111.945 229.232 111V111Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M186.232 83.9322C186.917 81.8184 189.908 81.8184 190.593 83.9322V83.9322C190.899 84.8774 191.78 85.5175 192.774 85.5175V85.5175C194.996 85.5175 195.916 88.3652 194.12 89.6734V89.6734C193.317 90.2581 192.98 91.297 193.286 92.2418V92.2418C193.971 94.3538 191.556 96.1197 189.762 94.8126V94.8126C188.958 94.227 187.868 94.227 187.064 94.8126V94.8126C185.269 96.1197 182.855 94.3538 183.539 92.2418V92.2418C183.845 91.297 183.509 90.2581 182.706 89.6734V89.6734C180.91 88.3652 181.83 85.5175 184.052 85.5175V85.5175C185.045 85.5175 185.926 84.8774 186.232 83.9322V83.9322Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M112.232 83.9322C112.917 81.8184 115.908 81.8184 116.593 83.9322V83.9322C116.899 84.8774 117.78 85.5175 118.774 85.5175V85.5175C120.996 85.5175 121.916 88.3652 120.12 89.6734V89.6734C119.317 90.2581 118.98 91.297 119.286 92.2418V92.2418C119.971 94.3538 117.556 96.1197 115.762 94.8126V94.8126C114.958 94.227 113.868 94.227 113.064 94.8126V94.8126C111.269 96.1197 108.855 94.3538 109.539 92.2418V92.2418C109.845 91.297 109.509 90.2581 108.706 89.6734V89.6734C106.91 88.3652 107.83 85.5175 110.052 85.5175V85.5175C111.045 85.5175 111.926 84.8774 112.232 83.9322V83.9322Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M176.232 6.72719C176.917 4.61341 179.908 4.61341 180.593 6.72719V6.72719C180.899 7.67236 181.78 8.31252 182.774 8.31252V8.31252C184.996 8.31252 185.916 11.1602 184.12 12.4684V12.4684C183.317 13.0531 182.98 14.092 183.286 15.0368V15.0368C183.971 17.1488 181.556 18.9147 179.762 17.6076V17.6076C178.958 17.022 177.868 17.022 177.064 17.6076V17.6076C175.269 18.9147 172.855 17.1488 173.539 15.0368V15.0368C173.845 14.092 173.509 13.0531 172.706 12.4684V12.4684C170.91 11.1602 171.83 8.31252 174.052 8.31252V8.31252C175.045 8.31252 175.926 7.67236 176.232 6.72719V6.72719Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M72.2323 99.9722C72.9174 97.8584 75.9079 97.8584 76.593 99.9722V99.9722C76.8994 100.917 77.7802 101.558 78.7738 101.558V101.558C80.9958 101.558 81.9157 104.405 80.1196 105.713V105.713C79.3167 106.298 78.98 107.337 79.2862 108.282V108.282C79.9708 110.394 77.5562 112.16 75.7616 110.853V110.853C74.9577 110.267 73.8677 110.267 73.0637 110.853V110.853C71.2692 112.16 68.8546 110.394 69.5391 108.282V108.282C69.8453 107.337 69.5086 106.298 68.7058 105.713V105.713C66.9097 104.405 67.8295 101.558 70.0515 101.558V101.558C71.0451 101.558 71.926 100.917 72.2323 99.9722V99.9722Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M133.232 20.7747C133.917 18.6609 136.908 18.6609 137.593 20.7747V20.7747C137.899 21.7199 138.78 22.36 139.774 22.36V22.36C141.996 22.36 142.916 25.2077 141.12 26.5159V26.5159C140.317 27.1006 139.98 28.1395 140.286 29.0843V29.0843C140.971 31.1963 138.556 32.9622 136.762 31.6551V31.6551C135.958 31.0695 134.868 31.0695 134.064 31.6551V31.6551C132.269 32.9622 129.855 31.1963 130.539 29.0843V29.0843C130.845 28.1395 130.509 27.1006 129.706 26.5159V26.5159C127.91 25.2077 128.83 22.36 131.052 22.36V22.36C132.045 22.36 132.926 21.7199 133.232 20.7747V20.7747Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M23.2323 119.02C23.9174 116.906 26.9079 116.906 27.593 119.02V119.02C27.8994 119.965 28.7802 120.605 29.7738 120.605V120.605C31.9958 120.605 32.9157 123.453 31.1196 124.761V124.761C30.3167 125.346 29.98 126.384 30.2862 127.329V127.329C30.9708 129.441 28.5562 131.207 26.7616 129.9V129.9C25.9577 129.314 24.8677 129.314 24.0637 129.9V129.9C22.2692 131.207 19.8546 129.441 20.5391 127.329V127.329C20.8453 126.384 20.5086 125.346 19.7058 124.761V124.761C17.9097 123.453 18.8295 120.605 21.0515 120.605V120.605C22.0451 120.605 22.926 119.965 23.2323 119.02V119.02Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M101.232 41.8272C101.917 39.7134 104.908 39.7134 105.593 41.8272V41.8272C105.899 42.7724 106.78 43.4125 107.774 43.4125V43.4125C109.996 43.4125 110.916 46.2602 109.12 47.5684V47.5684C108.317 48.1531 107.98 49.192 108.286 50.1368V50.1368C108.971 52.2488 106.556 54.0147 104.762 52.7076V52.7076C103.958 52.122 102.868 52.122 102.064 52.7076V52.7076C100.269 54.0147 97.8546 52.2488 98.5391 50.1368V50.1368C98.8453 49.192 98.5086 48.1531 97.7058 47.5684V47.5684C95.9097 46.2602 96.8295 43.4125 99.0515 43.4125V43.4125C100.045 43.4125 100.926 42.7724 101.232 41.8272V41.8272Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M83.2323 12.7547C83.9174 10.6409 86.9079 10.6409 87.593 12.7547V12.7547C87.8994 13.6999 88.7802 14.34 89.7738 14.34V14.34C91.9958 14.34 92.9157 17.1877 91.1196 18.4959V18.4959C90.3167 19.0806 89.98 20.1194 90.2862 21.0643V21.0643C90.9708 23.1763 88.5562 24.9422 86.7616 23.6351V23.6351C85.9577 23.0495 84.8677 23.0495 84.0637 23.6351V23.6351C82.2692 24.9422 79.8546 23.1763 80.5391 21.0643V21.0643C80.8453 20.1194 80.5086 19.0806 79.7058 18.4959V18.4959C77.9097 17.1877 78.8295 14.34 81.0515 14.34V14.34C82.0451 14.34 82.926 13.6999 83.2323 12.7547V12.7547Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M64.2323 62.8797C64.9174 60.7659 67.9079 60.7659 68.593 62.8797V62.8797C68.8994 63.8249 69.7802 64.465 70.7738 64.465V64.465C72.9958 64.465 73.9157 67.3127 72.1196 68.6209V68.6209C71.3167 69.2056 70.98 70.2444 71.2862 71.1893V71.1893C71.9708 73.3013 69.5562 75.0672 67.7616 73.7601V73.7601C66.9577 73.1745 65.8677 73.1745 65.0637 73.7601V73.7601C63.2692 75.0672 60.8546 73.3013 61.5391 71.1893V71.1893C61.8453 70.2444 61.5086 69.2056 60.7058 68.6209V68.6209C58.9097 67.3127 59.8295 64.465 62.0515 64.465V64.465C63.0451 64.465 63.926 63.8249 64.2323 62.8797V62.8797Z" fill="#C1DFF0" fill-opacity="0.4"/>
<path d="M23.2323 72.9047C23.9174 70.7909 26.9079 70.7909 27.593 72.9047V72.9047C27.8994 73.8499 28.7802 74.49 29.7738 74.49V74.49C31.9958 74.49 32.9157 77.3377 31.1196 78.6459V78.6459C30.3167 79.2306 29.98 80.2694 30.2862 81.2143V81.2143C30.9708 83.3263 28.5562 85.0922 26.7616 83.7851V83.7851C25.9577 83.1995 24.8677 83.1995 24.0637 83.7851V83.7851C22.2692 85.0922 19.8546 83.3263 20.5391 81.2143V81.2143C20.8453 80.2694 20.5086 79.2306 19.7058 78.6459V78.6459C17.9097 77.3377 18.8295 74.49 21.0515 74.49V74.49C22.0451 74.49 22.926 73.8499 23.2323 72.9047V72.9047Z" fill="#C1DFF0" fill-opacity="0.4"/>
</svg>
Here's the complete file; I don't just load the file because I want to edit the text.
Sahitya is installed on my PC and I noticed the same behaviour when running with my mac
Okay, I was able to bypass it.
I ran ubuntu via wsl and set the FONTCONFIG_PATH and it worked, it's loading the correct font.
I guess windows and mac just don't play well with fontconfig.
Thanks, lovell.
You made a really great tool
Windows and macOS should work, as fontconfig will look in the standard OS locations by default if not configured to look elsewhere.
For Windows, ensure fonts are installed in the standard C:\Windows\Fonts directory and that the names used to reference them match exactly.
For macOS, you can see the paths that will be searched at https://gitlab.freedesktop.org/fontconfig/fontconfig/-/blob/main/meson.build#L221
In the example provided above, the named font Sahitya would need to exist in its own right. Perhaps you meant (note the quotes):
font-family="'Sahitya Bold'"
Yeah, I have tried all variations. Sahitya is installed in windows; also opening the SVG on my PC using other tools renders with the correct font. I guess fontconfig just isn't finding the correct path; it might have to do with the way windows renders paths. I'll stick with my workaround for now. It's a pretty large project and I'm already way behind. Thanks again