: Scaling SVG while preserving aspect ratio of embedded SVG I am trying to build a map with a SVG. It should be possible to scale the whole map without keeping the aspect ration. However the

I am trying to build a map with a SVG. It should be possible to scale the whole map without keeping the aspect ration. However the aspect ratio of the markers should be preserved.

Following SVG is doing would I want:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="225" style="width: 100%; height: 5em">
<svg preserveAspectRatio="xMidYMax meet" x="26.9%" width="100" y="56.7%" height="20" class="city">
<circle cx="5" cy="15" r="2" style="fill:red" id="TH-10" name="Bangkok" />
<text x="10" y="17">Bangkok</text>
</svg>
<svg preserveAspectRatio="xMidYMax meet" x="43.8%" width="100" y="32.7%" height="20" class="city">
<circle cx="5" cy="15" r="2" style="fill:red" id="LA-VT" name="Vientiane" />
<text x="10" y="17">Vientiane</text>
</svg>
<svg preserveAspectRatio="xMidYMax meet" x="61.5%" width="100" y="68.7%" height="20" class="city">
<circle cx="5" cy="15" r="2" style="fill:red" id="KH-12" name="Phnom Penh" />
<text x="10" y="17">Phnom Penh</text>
</svg>
<svg preserveAspectRatio="xMidYMax meet" x="68.5%" width="100" y="14%" height="20" class="city">
<circle cx="5" cy="15" r="2" style="fill:red" id="VN-HN" name="Ha Noi" />
<text x="10" y="17">Ha Noi</text>
</svg>
<svg preserveAspectRatio="xMidYMax meet" x="75%" width="100" y="71.3%" height="20" class="city">
<circle cx="5" cy="15" r="2" style="fill:red" id="VN-SG" name="Ho Chi Minh" />
<text x="10" y="17">Ho Chi Minh</text>
</svg>
</svg>

As I want to add more markers without having to calculate the relative coordinates, I added a new user coordinate system with viewBox="97.3436 -23.3932 12.116 17.78" (representing the geo-coordinates) and gave it a try by changing the coordinates of the city-SVGs:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="97.3436 -23.3932 12.116 17.78" width="12.116em" height="17.78em" style="width: 100%;height:5em;border:1px solid dimgray;" preserveAspectRatio="none">
<svg x="105.854167" y="-21.028472" class="city" viewBox="0 0 100 10" height="1em" preserveAspectRatio="xMinYMin">
<circle cx="2" cy="5" r="1" style="fill:red" id="VN-HN" name="Ha Noi" />
<text x="5" y="8" font-size="10">Ha Noi</text>
</svg>
<svg x="106.7017555" y="-10.7758439" class="city" viewBox="0 0 100 10" height="1em" preserveAspectRatio="xMinYMin">
<circle cx="2" cy="5" r="1" style="fill:red" id="VN-SG" name="Ho Chi Minh" />
<text x="5" y="8" font-size="10">Ho Chi Minh</text>
</svg>
</svg>

Unfortunately that isn't working and I'm not having any idea how to solve this problem. Is it possible and what needs to be changed?

Many thanks in advance!

10.01% popularity Vote Up Vote Down

: Illustrator shadow layer inside a layer with stroke? I am having a tough time with creating a shadow, I am using strokes so when I want to create a darker tone inside the characters neck

@Angie364

Posted in: #AdobeIllustrator #Illustration #Stroke

1 Comments

: How can I get visual queues for anchor snap in the new Illustrator CC 2015.2 Before the last update Illustrator would give a visual queue when it snapped to anchors. Now it only displays an

@Angie364

Posted in: #AdobeIllustrator #Snapping

0 Comments

: Printer wants to use CMYK 30-30-20-100 for black which produces a dark purple? I'm doing some work for a food truck wrap and the printer wants designers to use 30-30-20-100 CMYK for all black

@Angie364

Posted in: #Cmyk #PrintDesign

1 Comments

: Illustrator add inner shadow effect? I have a rounded square with some stroke. I want some inner color. Similar to this. How can I achieve that effect in illustrator?

@Angie364

Posted in: #AdobeIllustrator

5 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Becky351

In your second example, try this:

style="width: 660px;height:252px;border:1px solid dimgray;" preserveAspectRatio="xMinYMin">

Set both the width and height of the drawing to a specific dimension that is a multiple of the coordinate system extents. Your coordinate system is approx 110 units wide and 42 units high (so if you want it 6x scale, make it 660px by 252px).
Force the aspect ratio using e.g. xMinYMin

This way, the full drawing maintains the proper aspect ratio and is not cropped.

10% popularity Vote Up Vote Down

Feed

: Scaling SVG while preserving aspect ratio of embedded SVG I am trying to build a map with a SVG. It should be possible to scale the whole map without keeping the aspect ration. However the

More posts by @Angie364

: Illustrator shadow layer inside a layer with stroke? I am having a tough time with creating a shadow, I am using strokes so when I want to create a darker tone inside the characters neck

: How can I get visual queues for anchor snap in the new Illustrator CC 2015.2 Before the last update Illustrator would give a visual queue when it snapped to anchors. Now it only displays an

: Printer wants to use CMYK 30-30-20-100 for black which produces a dark purple? I'm doing some work for a food truck wrap and the printer wants designers to use 30-30-20-100 CMYK for all black

: Illustrator add inner shadow effect? I have a rounded square with some stroke. I want some inner color. Similar to this. How can I achieve that effect in illustrator?

Login to post a comment!

1 Comments

Back to top | Use Dark Theme