CODEWITHSUNDEEP
svg
user2005477
user2005477

Reputation:

How do I scale a container around text in SVG?

I am very new to SVG, and would like to scale a container vertically as the text inside it gets longer (no wrapping). This is the SVG I have (from github.com/badges/shields):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="63px" height="18px" viewBox="1 2.5 63 18" enable-background="new 1 2.5 63 18" xml:space="preserve">
<g id="Green">

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="275" y1="-660.4995" x2="275" y2="-642.5" gradientTransform="matrix(1 0 0 -1 -228 -640)">
        <stop  offset="0" style="stop-color:#4F0400"/>
        <stop  offset="0.1" style="stop-color:#730600"/>
        <stop  offset="0.96" style="stop-color:#E30C00"/>
        <stop  offset="1" style="stop-color:#FFA69B"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M30,20.5h31c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3H30V20.5z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1079.5" y1="3569.875" x2="1079.5" y2="3551.9966" gradientTransform="matrix(1 0 0 1 -1064 -3549.5)">
        <stop  offset="0" style="stop-color:#2E2E2E"/>
        <stop  offset="0.1" style="stop-color:#3F3F3F"/>
        <stop  offset="0.96" style="stop-color:#5A5A5A"/>
        <stop  offset="1" style="stop-color:#AAAAAA"/>
    </linearGradient>
    <path fill="url(#SVGID_2_)" d="M30,20.5H4c-1.657,0-3-1.343-3-3v-12c0-1.657,1.343-3,3-3h26V20.5z"/>
    <g>
        <g opacity="0.3">
            <text transform="matrix(1 0 0 1 35 15.75)" font-family="'OpenSans'" font-size="10">1.1.1</text>
        </g>
        <g>
            <text transform="matrix(1 0 0 1 35 14.75)" fill="#FFFFFF" font-family="'OpenSans'" font-size="10">1.1.1</text>
        </g>
    </g>
    <g>
        <g opacity="0.3">
            <text transform="matrix(1 0 0 1 6 15.75)" font-family="'OpenSans'" font-size="10">gem</text>
        </g>
        <g>
            <text transform="matrix(1 0 0 1 6 14.75)" fill="#FFFFFF" font-family="'OpenSans'" font-size="10">gem</text>
        </g>
    </g>
</g>
</svg>

This is the graphic the above produces:

Original graphic

And this is what happens when I change 1.1.1 to more text which is shown in the Developer Tools:

Original graphic with more text

I'd like this graphic's container to resize as more text is present. I already researched this issue and only found answers showing how to fit the text inside the container, not how to scale the container around the text (without changing its font size). Is this possible in SVG?

Upvotes: 1

Views: 725

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

SVG describes the content of the page in an explicit way, with explicit sizing. It isn't like HTML where a parent box resizes with its content.

So if you resize the text, you have to resize the red box that is drawn before (behind it) manually. You have probably already worked that out.

In this case the "box" in question is the first <path> element. The path description is as follows:

d="M30,20.5h31c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3H30V20.5z

The 'M' stands for move. The 'H' for horizontal line. The 'C' for bezier curve etc. You can read more about paths here: http://www.w3.org/TR/SVG/paths.html

In this case, we are lucky. All we have to do to make the red box longer is to increase the value following the 'h' command.

How much you increase it by obviously depends on the text, but let's try increasing it by 20. So 31 now becomes 51:

d="M30,20.5h51c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3H30V20.5z

If you try this, however, you will discover that our graphic now extends off the right hand size of the SVG diagram and is cut off. To fix that, we need to change the size of the SVG document. We need to add 20 to the width and 20 to the width component of the viewBox. So:

width="63px" height="18px" viewBox="1 2.5 63 18"

becomes:

width="83px" height="18px" viewBox="1 2.5 83 18"

You can view the final modified file here: http://jsfiddle.net/2UXg5/

Upvotes: 1

Related Questions