CODEWITHSUNDEEP
javascriptsvg
Pierre GUILLAUME
Pierre GUILLAUME

Reputation: 449

How to keep a constant font-size in svg

I'm new with SVG and I try to add some text in a shape that I created. I've done it like this : https://fiddle.jshell.net/30kL3mzt/ But the text in the SVG change with the polygone. Is it possible to keep a constant size of text? Or at least to control the size of letters?

<div id="tab">
    <div class='chevron'>
        <svg width="25%" height='100%' viewBox="0 0 20 20" preserveAspectRatio="none">
        <polygon fill=steelblue stroke-width=0 
                     points="0,0 2,10 0,20 18,20 20,10 18,0" />
        <text x="0" y="10" font-family="Verdana" font-size="2" >I love SVG!</text>
        </svg>
    </div>
</div>
<div id="middle">
            <svg width="25%" height='100%' viewBox="0 0 20 20" preserveAspectRatio="none">
        <polygon fill=steelblue stroke-width=0 
                     points="0,0 2,10 0,20 18,20 20,10 18,0" />
        <text x="0" y="10" font-family="Verdana" font-size="2" >I love SVG!</text>
        </svg>
</div>

Upvotes: 1

Views: 1404

Answers (2)

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

Instead of adding svg directly inside your HTML, why not use a font library like fontello/icomoon?

I know for a fact, when you choose the same grid size for your icons you can scale up your icons separately from your text. This is because an icon from a font file uses CSS on the pseudo-elements :before and/or :after. Combined with line-height you have complete control on the size of an icon. => Line-height is best calculated by the height of the layer divided by the font-size.

For example: 24px div / 20px text = 1.2

In my opinion you're too far off from an x-browser solution to your problem.

  • convert your shapes into font library (import svg files)
  • add the proper CSS from the download (or read the readme.txt)
  • make sure to support .woff on the server
  • use font icon classes where needed
  • override the proper font-sizes to your need in CSS (there's your solution)

Upvotes: 1

Stoycho Trenchev
Stoycho Trenchev

Reputation: 555

Why do you need the textual content to be in the SVG if you don't want it to scale? Probably it's better to have the text outside and style it with CSS to be where you want it.

Upvotes: 0

Related Questions