Jump to content

Recommended Posts

I am aiming to export SVG files with 12 point text (in Affinity) where that text is the same size as the 12 point text in the HTML where the SVG is embedded.

 

As you can see, the text in the SVG and PNG is smaller that the text in the HTML above it.

 

5ac8db266dc0b_ScreenShot2018-04-07at10_17_27pm.thumb.png.41cb549372d4ea4689c1c298f6cf21c6.png

 

The HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <style media="screen">
            * {
                font-size: 12pt;
                font-family: "Open Sans";
            }
        </style>
    </head>
    <body>
        <p>This is a test of SVG sizes from Affinity Designer.</p>
        <p>The font on this page is 12 point Open Sans Regular.</p>
        <p><strong>SVG</strong></p>
        <p><object type="image/svg+xml" data="1.svg">Your browser does not support SVG.</object></p>
        <p><strong>PNG</strong></p>
        <p><img src="1.png" alt=""></p>
    </body>
</html>

 

The SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <rect x="0" y="0" width="400" height="300" style="fill:#f2f2f2;"/>
    <text x="10px" y="19.117px" style="font-family:'OpenSans-Regular', 'Open Sans', sans-serif;font-size:12px;">This is 12 point Open Sans Regular.</text>
    <text x="62.674px" y="162.808px" style="font-family:'OpenSans-Bold', 'Open Sans', sans-serif;font-weight:700;font-size:52.831px;fill:#fff;">400×300px</text>
</svg>

 

Share this post


Link to post
Share on other sites

Okay, so I just noticed that the exported SVG gets font-size:12px, and I think that should be 12 point not 12 pixels.

 

Does this mean that when you choose 12 pt in Affinity Designer, you’re really choosing 12 px?

Share this post


Link to post
Share on other sites

When I manually change 12px in the exported SVG file to 12pt, the text in the SVG is displayed bigger than originally designed in Affinity. This will be a problem for designing figures.

Share this post


Link to post
Share on other sites

When I change the Document Units in Document Setup… from from pixels to points, 400px by 300px becomes 400pt by 300pt automatically. But the image doesn’t get bigger or smaller, which supports the conclusion that 12pt and 12px are the same in Affinity when exporting to SVG.

Share this post


Link to post
Share on other sites

Last post on this issue and then I’ll wait to see what others think.

 

My interim solution is to use size 16 pt font in Affinity Designer. It will export as 16 px, which matches the HTML where it will be embedded.

Share this post


Link to post
Share on other sites
8 hours ago, lukejanicke said:

I notice that 12pt in CSS is reported at 16px in Developer Tools (in Safari). That seems relevant.

{...}

When I change the Document Units in Document Setup… from from pixels to points, 400px by 300px becomes 400pt by 300pt automatically. But the image doesn’t get bigger or smaller, which supports the conclusion that 12pt and 12px are the same in Affinity when exporting to SVG.

The so-called desktop publishing point is defined as 1/72 of an international inch. This means that its size in pixels will depend on the dpi (actually, pixels per inch) of the document. So for a 72 dpi document 1 px = 1 pt, but for a 96 dpi document a point will be larger by the ratio 96/72 (1.33333333), which for 12 points works out to 16 px.


Affinity Photo 1.8.3, Affinity Designer 1.8.3, Affinity Publisher 1.8.3; macOS Mojave 10.14.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 
1.8.3.180 & Affinity Designer 1.8.3.2 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.3.1

Share this post


Link to post
Share on other sites

Solved!

 

I should have noticed that ratio. I thought I had tried changing DPI but then I noticed that even if the document’s DPI is set to 96, the SVG export DPI is automatically set to 72 at first. When I set the document DPI to 96 and also set the SVG export DPI to 96, then the text in the exported image is 12pt/16px on the webpage, same size at the HTML 12py/16px text.

 

Thanks!

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.