SVG + Handlebars - Rotating a graphic and adjusting proportions - svg

Question

I'm trying to rotate a graphic within a svg but i'm having the hardest time.
Below image is what I'm trying to achieve, a rotated version by switching the original width with the height but keeping all original proportions
I've tried rotating the individual object and rotating the full on but nothing comes even remotely close to the end result. the screenshot below comes from my front end webpage, the backend unfortunately needs an svg to print labels in the correct location.
let me know if anything else is needed to be able to troubleshoot this
Screenshot of how it would look coming out of your printer:
Desired End Result (badges to wear on your person):
Handlebars template:
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="{{paper.width}}{{paper.unit}}" height="{{paper.height}}{{paper.unit}}" viewBox="0 0 {{paper.width}} {{paper.height}}">
{{#each papers}}
<g transform="translate({{leftOffset}}, {{topOffset}})">
{{#each badges}}
<!--Badge {{#index}}-->
<g transform="translate({{leftOffset}}, {{topOffset}})">
<svg width="{{width}}" height="{{height}}" viewBox="0 0 {{width}} {{height}}">
{{#each objects}}
{{#if placeholder}}
<!--Text: {{placeholder}}-->
<svg x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}">
<text x="{{leftOffset}}" y="{{topOffset}}" text-anchor="{{alignment}}" font-size="{{fontSize}}" font-family="{{fontName}}" font-weight="{{fontWeight}}" font-style="{{fontStyle}}" fill="{{fontColor}}" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})">
{{value}}
</text>
</svg>
{{else}}
{{#if background}}
<!--Background: {{name}}-->
{{else}}
{{#if isDropdown}}
<!--Image: {{value}}-->
{{else}}
{{#if file}}
<!--Image: Uploaded - {{cid}}-->
{{else}}
<!--Image: {{name}}-->
{{/if}}
{{/if}}
{{/if}}
<svg preserveAspectRatio="{{aspectRatio}}" x="{{leftOffset}}" y="{{topOffset}}" width="{{width}}" height="{{height}}" viewBox="0 0 {{backWidth}} {{backHeight}}">
<image xlink:href="{{href}}" x="0" y="0" width="100%" height="100%" transform="rotate({{rotation}} {{rotationX}} {{rotationY}})"/>
</svg>
{{/if}}
{{/each}}
</svg>
</g>
{{/each}}
</g>
{{/each}}
<defs>
<style type="text/css">
{{#each googleFonts}}
<link xmlns="http://www.w3.org/1999/xhtml" href="{{url}}" rel="stylesheet" type="text/css" />
{{/each}}
{{#each fonts}}
{{fontFace}}
{{/each}}
</style>
</defs>
</svg>
Completed example:
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692">
<g transform="translate(0.27906, 1.62367)">
<!--Badge 0-->
<g transform="translate(0, 0)">
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<!--Image: belgian-flag(2).jpg-->
<svg preserveAspectRatio="none" x="1.2888000000000002" y="0.172" width="0.4915" height="0.4988" viewBox="0 0 226 400">
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(90 200 113)"/>
</svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="2.3009999999999997" y="0.2335" width="0.5038" height="0.5036" viewBox="0 0 48 48">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(90 24 24)"/>
</svg>
<!--Text: Name-->
<svg x="1.5157" y="0.2712" width="2.0202" height="0.48227999999999993">
<text x="2.1817" y="0.3122" text-anchor="end" font-size="0.2225" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(90 1.0101 0.24113999999999997)">
DFGHDFGH
</text>
</svg>
<!--Text: Title-->
<svg x="1.5526" y="1.2349" width="2.0202" height="0.47652">
<text x="1.2227999999999999" y="0.2818833333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(90 1.0101 0.23826)">
dfghdgh
</text>
</svg>
</svg>
</g>
<!--Badge 1-->
<g transform="translate(3.8548, 0)">
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<!--Image: belgian-flag(2).jpg-->
<svg preserveAspectRatio="none" x="0.4193" y="1.3148" width="0.4924" height="0.5027" viewBox="0 0 400 226">
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;" x="0" y="0" width="100%" height="100%" transform="rotate(0 113 200)"/>
</svg>
<!--Image: Albania.png-->
<svg preserveAspectRatio="xMidYMid meet" x="0.4808" y="0.3016" width="0.5078" height="0.5027" viewBox="0 0 48 48">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;" x="0" y="0" width="100%" height="100%" transform="rotate(0 24 24)"/>
</svg>
<!--Text: Name-->
<svg x="1.5119" y="0.2707" width="2.02212" height="0.48263999999999996">
<text x="1.6851" y="0.3261" text-anchor="end" font-size="0.25" font-family="Arial" font-weight="400" font-style="normal" fill="#000000" transform="rotate(0 1.01106 0.24131999999999998)">
DFGHDF
</text>
</svg>
<!--Text: Title-->
<svg x="1.5504" y="1.2375" width="2.02212" height="0.4732799999999999">
<text x="1.6851" y="0.2805333333333333" text-anchor="end" font-size="0.16666666666666666" font-family="Arial" font-weight="400" font-style="italic" fill="#000000" transform="rotate(0 1.01106 0.23663999999999996)">
ghdfghdfgh
</text>
</svg>
</svg>
</g>
</g>
<defs>
<style type="text/css">
#font-face {
font-family: '
Arial'
;
src: url('file:///G:/Work/NPGC/assets/fonts/Arial.ttf') format('
truetype'
);
}
</style>
</defs>
</svg>

Answer 1

I am not the least sure I have understood what you mean when you say "keeping all original proportions". My interpretation is that you refer to percentages of the badge width/height.
The best way to write this is to rotate not the individual components, but the badge as a whole:
Define one badge in landscape proportions, and the other in portrait proportions. Set respective width, height and viewBox for both.
The content elements get identical attributes for both variants: x and y for all of them, and width and height for the images all get percentage values.
The portrait badge is then rotated and translated so that it sits below the landscape badge.
<svg xmlns="http://www.w3.org/2000/svg"
width="8.267in" height="11.692in" viewBox="0 0 8.267 11.692">
<!-- landscape mode -->
<svg width="3.8548" height="2.1114" viewBox="0 0 3.8548 2.1114">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;"
x="8%" y="25%" width="15%" height="15%"
preserveAspectRatio="xMidYMid meet"/>
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;"
x="8%" y="63%" width="15%" height="12%"
preserveAspectRatio="none"/>
<text x="88%" y="30%" text-anchor="end"
font-size="0.25" font-family="Arial" font-weight="400"
font-style="normal" fill="#000000">My Name</text>
<text x="88%" y="70%" text-anchor="end"
font-size="0.25" font-family="Arial" font-weight="400"
font-style="normal" fill="#000000">My Title</text>
</svg>
<!-- portrait mode -->
<svg height="3.8548" width="2.1114" viewBox="0 0 2.1114 3.8548"
transform="translate(0 4.2228) rotate(-90)">
<image xlink:href="https://i.imgur.com/gFbTCmq.png;"
x="8%" y="25%" width="15%" height="15%"
preserveAspectRatio="xMidYMid meet"/>
<image xlink:href="https://i.imgur.com/QLTDr7J.jpg;"
x="8%" y="63%" width="15%" height="12%"
preserveAspectRatio="none"/>
<text x="88%" y="30%" text-anchor="end"
font-size="0.25" font-family="Arial" font-weight="400"
font-style="normal" fill="#000000">My Name</text>
<text x="88%" y="70%" text-anchor="end"
font-size="0.25" font-family="Arial" font-weight="400"
font-style="normal" fill="#000000">My Title</text>
</svg>
</svg>
I've rotated the portrait variant counter-clockwise. If that is a problem, the clockwise transform would read
transform="translate(3.8548 2.1114) rotate(90)"
For the template part, you only need to differentiate between the badge dimensions. All internal dimensions stay the same for both badges.