Mixing
SVG: how to scale font sizes when scaling SVG document?
Questions like this, this, this, this, and this on SVG scaling did not help.
What's the best way to scale font sizes when scaling SVG documents?
Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.
Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.
We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.
We need the 500x1000 version to look proportionally like the 250x500 version.
Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.
Or is manually computing and setting the font sizes the best way?
javascript html css svg fonts
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
add a comment |
Questions like this, this, this, this, and this on SVG scaling did not help.
What's the best way to scale font sizes when scaling SVG documents?
Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.
Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.
We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.
We need the 500x1000 version to look proportionally like the 250x500 version.
Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.
Or is manually computing and setting the font sizes the best way?
javascript html css svg fonts
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
1
I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is avewBoxattribute for your<svg>element, for examplevewBox="0 0 250 500". A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the<svg>element from 250x500 to 500x1000 the viewport is still 250x500 user units.
– enxaneta
Jan 2 at 8:48
If you have an<svg vewBox="0 0 250 500" width="250">one user unit is equivalent to 1px. If you do this:<svg vewBox="0 0 250 500" width="500">the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px
– enxaneta
Jan 2 at 8:48
add a comment |
Questions like this, this, this, this, and this on SVG scaling did not help.
What's the best way to scale font sizes when scaling SVG documents?
Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.
Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.
We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.
We need the 500x1000 version to look proportionally like the 250x500 version.
Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.
Or is manually computing and setting the font sizes the best way?
javascript html css svg fonts
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
Questions like this, this, this, this, and this on SVG scaling did not help.
What's the best way to scale font sizes when scaling SVG documents?
Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.
Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.
We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.
We need the 500x1000 version to look proportionally like the 250x500 version.
Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.
Or is manually computing and setting the font sizes the best way?
javascript html css svg fonts
javascript html css svg fonts
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
asked Jan 2 at 6:10
CrashalotCrashalot
15.5k48190332
15.5k48190332
1
I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is avewBoxattribute for your<svg>element, for examplevewBox="0 0 250 500". A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the<svg>element from 250x500 to 500x1000 the viewport is still 250x500 user units.
– enxaneta
Jan 2 at 8:48
If you have an<svg vewBox="0 0 250 500" width="250">one user unit is equivalent to 1px. If you do this:<svg vewBox="0 0 250 500" width="500">the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px
– enxaneta
Jan 2 at 8:48
add a comment |
1
I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is avewBoxattribute for your<svg>element, for examplevewBox="0 0 250 500". A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the<svg>element from 250x500 to 500x1000 the viewport is still 250x500 user units.
– enxaneta
Jan 2 at 8:48
If you have an<svg vewBox="0 0 250 500" width="250">one user unit is equivalent to 1px. If you do this:<svg vewBox="0 0 250 500" width="500">the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px
– enxaneta
Jan 2 at 8:48
1
1
I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is a
vewBox attribute for your <svg> element, for example vewBox="0 0 250 500". A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the <svg> element from 250x500 to 500x1000 the viewport is still 250x500 user units.– enxaneta
Jan 2 at 8:48
I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is a
vewBox attribute for your <svg> element, for example vewBox="0 0 250 500". A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the <svg> element from 250x500 to 500x1000 the viewport is still 250x500 user units.– enxaneta
Jan 2 at 8:48
If you have an
<svg vewBox="0 0 250 500" width="250"> one user unit is equivalent to 1px. If you do this: <svg vewBox="0 0 250 500" width="500"> the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px– enxaneta
Jan 2 at 8:48
If you have an
<svg vewBox="0 0 250 500" width="250"> one user unit is equivalent to 1px. If you do this: <svg vewBox="0 0 250 500" width="500"> the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px– enxaneta
Jan 2 at 8:48
add a comment |
1 Answer
1
active
oldest
votes
Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";
answered Jan 2 at 6:38
vicvic
15118
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001972%2fsvg-how-to-scale-font-sizes-when-scaling-svg-document%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";
answered Jan 2 at 6:38
vicvic
15118
add a comment |
Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";
answered Jan 2 at 6:38
vicvic
15118
add a comment |
Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";
answered Jan 2 at 6:38
vicvic
15118
Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";
answered Jan 2 at 6:38
vicvic
15118
answered Jan 2 at 6:38
vicvic
15118
answered Jan 2 at 6:38
vicvic
15118
answered Jan 2 at 6:38
vicvic
15118
15118
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001972%2fsvg-how-to-scale-font-sizes-when-scaling-svg-document%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is a
vewBoxattribute for your<svg>element, for examplevewBox="0 0 250 500". A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the<svg>element from 250x500 to 500x1000 the viewport is still 250x500 user units.– enxaneta
Jan 2 at 8:48
If you have an
<svg vewBox="0 0 250 500" width="250">one user unit is equivalent to 1px. If you do this:<svg vewBox="0 0 250 500" width="500">the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px– enxaneta
Jan 2 at 8:48