Use javascript to overlap two svgs, and save file

Use javascript to overlap two svgs, and save file - javascript

Is it possible to load two SVGs with JavaScript? For example, then use the first SVG as the base and the second SVG as a badge in the corner and then scale the combination as one and save as a single SVG?

Yes, you can append an <svg> element into an svgDocument :
var svgDocs = document.querySelectorAll('svg');
svgDocs[0].appendChild(svgDocs[1]);
svgDocs[1].width.baseVal.value/=3;
svgDocs[1].height.baseVal.value/=3;
svg{ border:1px solid}
<svg version ="1.1" id="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
<circle cx="60" cy="60" r="50" fill="pink"/>
</svg>
<svg version ="1.1" id="second" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
<rect x="10" y="10" width="100" height="100" fill="green"/>
</svg>

stepwise:
0: Load your resources with:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
1: Use transforms to scale, translate, as needed:
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform
2: To convert the final composite SVG element to file use/modify https://github.com/NYTimes/svg-crowbar, which I found from this Convert JavaScript-generated SVG to a file
or better discussion:
Generating, viewing, and saving SVG client-side in browser
disclaimer: I haven't tested this approach, so can't guarantee it, but I've done a lot of work programmatically with SVGs in the last few months, and I think it will work.
my work:(needs refactor but linked in case it could help understanding the HTML SVG API):
https://github.com/Terebinth/Vickers/blob/master/lib/minesweeper/minesweeper_001_.coffee

Related

Url in side of svg xmlns

I am trying to find url of this image:https://i.stack.imgur.com/Kfi6M.png
Page url:https://jobs.tnaa.com/jobsearch/results?Page=1&occupation=RN&city=&radius=20&state1=ALL&specialty=&GeoType=State
But there is no link except then svg xmlns. Can someone explain me what how can i find the url to this image and what is svg xmlns?
<a href="https://tnaa.com" class="logo logo--primary">
<svg xmlns="http://www.w3.org/6000/png" width="600" height="600" viewBox="0 0 105 105">
<path d="M473.85,66a1.29,1.29,0,0,1-.05-.24c0-.18,0-.36,0-.53V24a2.08,2.08,0,0,1,.06-.74,1.54,1.54,0,0,1,.3,0H578a2.79,2.79,0,0,1,.75.05c0,.1,0,.19,0,.28s0,.29,0,.44V81.33c0,.23,0,.45,0,.7a2.37,2.37,0,0,1-.31.06h-5.31l-.24,0-.22-.48Q569.49,74,566.3,66.5c-.07-.17-.15-.33-.22-.47-.53-.06-7.43-.06-7.88,0-.42.91-.8,1.86-1.2,2.81s-.8,1.89-1.2,2.83l-1.2,2.84-1.2,2.84c-.39.94-.8,1.89-1.2,2.83S551.41,82.08,551,83s-.78,1.89-1.24,2.9c-.61-1.4-1.16-2.72-1.71-4l-1.68-4-1.67-4L543,70l-1.68-4A2.09,2.09,0,0,0,541,66h-7.34l-.15,0c-.19.1-.21.29-.28.45L531.5,70.6l-7.2,17.07c0,.12-.11.23-.15.34s-.11-.09-.11-.14,0-.29,0-.43V66.66A1.6,1.6,0,0,0,524,66l-.47,0c-3.52,0-6.33,0-6.7.05-.13.16-.08.34-.08.52l.06,4.69.09,8.62a5.45,5.45,0,0,1,0,.56,1,1,0,0,1-.36-.39l-4.34-5.92-5.63-7.68-.15-.2a.5.5,0,0,0-.51-.26,4.51,4.51,0,0,1-.52,0H474.53A2.64,2.64,0,0,1,473.85,66Zm0,6.3q0,24.19,0,48.38a1.16,1.16,0,0,0,0,.18,1.52,1.52,0,0,0,.73.07H578c.15,0,.31,0,.47,0s.19,0,.31-.07V88.35c0-.15,0-.29,0-.44a1.64,1.64,0,0,0-.07-.28h-3.25a.7.7,0,0,0-.17.06c.06.14.1.27.16.41.41,1,.83,2,1.25,3,.05.13.15.25.09.42a1.81,1.81,0,0,1-.61.06H569.7a2.24,2.24,0,0,1-.31-.05l-.06-.07a.36.36,0,0,1,0-.09l-.06-.13q-3.4-8.86-6.83-17.72l-.12-.32a.08.08,0,0,0,0,0l0-.09s0,0,0,0h0s-.07,0-.07.06q-1.67,4.38-3.31,8.76a.38.38,0,0,0,0,.15,1.18,1.18,0,0,0,.56,0c1,0,1.94,0,2.91,0l.56,0a1.73,1.73,0,0,1,.12.2c.59,1.68,1.17,3.37,1.76,5.06a1.23,1.23,0,0,1,0,.19,1,1,0,0,1-.57.06H556.5c-.56,1.32-1,2.65-1.58,4a1.7,1.7,0,0,1-.28,0H544.9a1.7,1.7,0,0,1-.28,0c-.07-.16-.15-.32-.21-.48-.39-1-.78-2-1.18-3-.06-.16-.08-.35-.25-.45-.7,0-10.8,0-11.24,0-.07.16-.15.33-.22.51-.38,1-.76,2-1.15,3-.07.16-.09.35-.29.48l-.65,0H517.87c-.88,0-.68.07-1.16-.59l-8.28-11.27-1.68-2.28c-.05-.07-.09-.18-.25-.15a9.26,9.26,0,0,0,0,1.29c0,.42,0,.84,0,1.26s0,.87,0,1.31,0,.87,0,1.31,0,.87,0,1.3,0,.84,0,1.26,0,.87,0,1.31l0,1.31c0,.43,0,.87,0,1.3s0,.84,0,1.26a8.5,8.5,0,0,1,0,1.33,4.07,4.07,0,0,1-.47,0h-6.3a.75.75,0,0,1-.48-.09,2.45,2.45,0,0,1,0-.61V72.93c0-.16,0-.32,0-.49s0-.21,0-.32a1.5,1.5,0,0,0-.69-.06H474.11a1.87,1.87,0,0,0-.25,0A.65.65,0,0,0,473.81,72.25Zm9.64,19.3-.54,0c0-.11,0-.2-.05-.3s0-.22,0-.33c0-5.33,0-10.65,0-16a1.5,1.5,0,0,1,0-.56,1,1,0,0,1,.53-.07c2.06,0,4.13,0,6.19,0a.91.91,0,0,1,.53.08c0,.11,0,.24,0,.36.07,4.11,0,16.25-.05,16.76C489.66,91.57,487.27,91.59,483.45,91.55Zm28.94,32.08H474.13a2.3,2.3,0,0,0-.28.06,11,11,0,0,0,0,2.56l.71,0h38.2a2.3,2.3,0,0,0,.28-.06,16.83,16.83,0,0,0,0-2.56Zm24.79-50.24c-.54,1.41-1.07,2.82-1.6,4.24s-1,2.62-1.48,3.92c-.05.13-.14.26-.07.41.4.05,5.51.09,6.51,0a2.11,2.11,0,0,0,.28,0c-.05-.15-.09-.29-.14-.43-1.39-3.81-3.1-8.25-3.3-8.58A3.46,3.46,0,0,0,537.18,73.39Zm35.06,54c-.14-.2-.3-.39-.43-.6a1.77,1.77,0,0,1-.36-.59l.38-.27a1.9,1.9,0,0,0,.63-.75,2.08,2.08,0,0,0-1.39-2.9,4.21,4.21,0,0,0-1.17-.19c-.89,0-1.77,0-2.66,0a1.43,1.43,0,0,0-.28.07c0,.09,0,.15,0,.21,0,1.79,0,3.59,0,5.38a2.07,2.07,0,0,0,0,.3c.3,0,.57,0,.85,0a1.56,1.56,0,0,0,.8-.08c.09-.49,0-1,.08-1.44.85-.17.95-.13,1.39.48l.38.52.4.52h1.52l.28,0Zm-3.52-4a2,2,0,0,1,.28,0,7.22,7.22,0,0,1,.93,0,.93.93,0,0,1,.9.6.87.87,0,0,1-.73,1.17,3.69,3.69,0,0,1-1.37,0A6,6,0,0,1,568.72,123.47Zm-50.33.88a3.07,3.07,0,0,1-.85.06h-.78a2.69,2.69,0,0,1-.84-.06,5.42,5.42,0,0,1,0-1.06,5.76,5.76,0,0,0,0-1.1,4.36,4.36,0,0,0-1.69,0c0,.46,0,1,0,1.43s0,1,0,1.45,0,1,0,1.5a13.61,13.61,0,0,0,0,1.43,4.15,4.15,0,0,0,1.69,0c0-.35,0-.72,0-1.09a5.9,5.9,0,0,1,0-1.11,2.76,2.76,0,0,1,.85,0q.39,0,.78,0a2.28,2.28,0,0,1,.82.06,6,6,0,0,1,0,1.11,6.71,6.71,0,0,0,0,1.1,4,4,0,0,0,1.66,0,2.4,2.4,0,0,0,0-.28c0-1.75,0-3.51,0-5.27a2.19,2.19,0,0,0,0-.27,4.92,4.92,0,0,0-1.67,0C518.38,122.92,518.46,123.63,518.39,124.35Zm29,3.66c0-.14,0-.3,0-.46v-1.4c0-.13,0-.26.1-.36a11.68,11.68,0,0,1,2.38,0,.76.76,0,0,1,.06.47c0,.48,0,1,0,1.45a1.61,1.61,0,0,0,.06.35,9.72,9.72,0,0,0,1.62,0,1.07,1.07,0,0,0,0-.21c0-1.83,0-3.65,0-5.47a.59.59,0,0,0-.05-.19,1.24,1.24,0,0,0-.57-.06,4.51,4.51,0,0,0-.52,0c-.18,0-.38-.05-.57.1,0,.13,0,.27,0,.41,0,.47,0,.94,0,1.41a2.21,2.21,0,0,1-.05.33,7.2,7.2,0,0,1-1.22,0,3.54,3.54,0,0,1-1.25-.08c0-.17,0-.33,0-.49v-1.35c0-.11,0-.21,0-.34-.48,0-.93,0-1.38,0a1.07,1.07,0,0,0-.27.07c-.07.62-.05,5.46,0,5.86A5.23,5.23,0,0,0,547.4,128Zm-22-3.54c-.57,0-1.14,0-1.71,0-.16,0-.32,0-.46-.11a2.07,2.07,0,0,1,.06-1l.52,0h2.08a.81.81,0,0,0,.52-.09,4,4,0,0,0,0-1.14,1.6,1.6,0,0,0-.27,0h-4.32a1.59,1.59,0,0,0-.3.06c0,.09,0,.15,0,.21,0,1.81,0,3.62,0,5.42a1,1,0,0,0,0,.24,1.6,1.6,0,0,0,.27,0h4.43a1.77,1.77,0,0,0,.3-.06,3.35,3.35,0,0,0-.05-1.18h-2.83l-.41,0a2.91,2.91,0,0,1,0-1.1l.53,0h1.82a.47.47,0,0,0,.41-.12,5,5,0,0,0,0-1A1.94,1.94,0,0,0,525.44,124.47Zm50,1.3a.81.81,0,0,1,.52-.1c.61,0,1.22,0,1.82,0,.14,0,.27,0,.42,0a2.17,2.17,0,0,0,0-1.13l-.53,0H576a.89.89,0,0,1-.51-.07,1.8,1.8,0,0,1,0-1,1,1,0,0,1,.5-.06h2.19a.57.57,0,0,0,.47-.12c0-.16,0-.35,0-.55a1.4,1.4,0,0,0,0-.57l-.38,0h-4.06c-.15,0-.32,0-.44.11s0,.09,0,.13v5.47a.79.79,0,0,0,.06.22c.42,0,3.57.08,4.65,0a2,2,0,0,0,.32,0,3.34,3.34,0,0,0,0-1.18c-.55,0-1.09,0-1.62,0a13,13,0,0,1-1.64,0A3.23,3.23,0,0,1,575.47,125.77Zm-41.35,2c-.15-.33-.3-.65-.46-1-.66-1.4-1.31-2.8-2-4.21a.86.86,0,0,0-.29-.45h-1.63c-.06.12-.14.23-.19.34-.17.36-.34.71-.5,1.07-.63,1.34-1.27,2.68-1.89,4-.07.15-.2.3-.14.48a5.62,5.62,0,0,0,1.67,0,12,12,0,0,1,.55-1.07l.22,0c.71,0,1.42,0,2.13,0a.46.46,0,0,1,.5.33c.1.27.23.53.34.79a7.32,7.32,0,0,0,1.75,0A2.13,2.13,0,0,0,534.12,127.77Zm-2.74-2.12a.65.65,0,0,1-.17.08,6.8,6.8,0,0,1-1.42,0,8.52,8.52,0,0,1,.57-1.46c0-.13.06-.29.23-.36A8.33,8.33,0,0,1,531.38,125.65Zm34.83,2.2c-.35-.85-2.52-5.39-2.73-5.69a6.19,6.19,0,0,0-1.73,0l-2.63,5.61a1.42,1.42,0,0,0-.07.22,4.91,4.91,0,0,0,1.71,0c.23-.33.28-.75.54-1.06a19.91,19.91,0,0,1,2.68,0c.27.32.29.77.57,1.09a6.6,6.6,0,0,0,1.69,0A1.13,1.13,0,0,0,566.21,127.85Zm-2.79-2.21c-.13.15-.32.09-.48.1a5.42,5.42,0,0,1-.57,0,.85.85,0,0,1-.53-.09,3.88,3.88,0,0,1,.34-.89c.12-.29.25-.59.41-.94A7.06,7.06,0,0,1,563.42,125.64ZM558,122.4a4,4,0,0,0-2.32-.36,3.52,3.52,0,0,0-1.59.55,2.89,2.89,0,0,0-1.37,2.62,3,3,0,0,0,2.24,2.84,4.38,4.38,0,0,0,2.46,0,2.92,2.92,0,0,0,1.27-.72,1.35,1.35,0,0,0,.18-.25l-.51-.44c-.18-.14-.32-.34-.54-.4l-.08,0-.2.15a1.94,1.94,0,0,1-1.49.42,1.62,1.62,0,0,1-1.38-.89,1.75,1.75,0,0,1-.16-1.23,1.69,1.69,0,0,1,1.65-1.37,1.94,1.94,0,0,1,1.3.38l.37.27a7,7,0,0,0,1-.91A2.24,2.24,0,0,0,558,122.4ZM541.23,124v3.49a.81.81,0,0,0,.1.55,3.44,3.44,0,0,0,.79,0,1.64,1.64,0,0,0,.84-.1c0-.18,0-.37,0-.57,0-1.13,0-2.25,0-3.38a.89.89,0,0,1,.09-.59c.12,0,.26,0,.39,0h1.09a2.71,2.71,0,0,0,.37,0c0-.29,0-.57,0-.84a3.16,3.16,0,0,0,0-.32.71.71,0,0,0-.47-.08,47.82,47.82,0,0,0-5.1.07,2.79,2.79,0,0,0,0,1,.48.48,0,0,0,.09.21c.6,0,1.19,0,1.84,0C541.22,123.68,541.23,123.86,541.23,124Zm-2.1,2.79h-2.29a.21.21,0,0,1-.21-.18,3.24,3.24,0,0,1,0-.44v-3.48a1.14,1.14,0,0,0-.07-.56,9.66,9.66,0,0,0-1.32,0,2,2,0,0,0-.28,0c-.09.41-.11,2.83-.07,5.48,0,.13,0,.25,0,.39a1.31,1.31,0,0,0,.22.05h4.37a.46.46,0,0,0,.16-.06,1.13,1.13,0,0,0,0-.18v-.94A1.17,1.17,0,0,0,539.13,126.82Z" transform="translate(-473.79 -23.23)">
</path>
</svg>
</a>

There is actually no url for the image, that is an SVG, the entire image is drawn in the <path ....>
To use that image just copy the SVG, that is everything from:
<svg xmlns="....
</svg>

Load external SVG icons into vanilla JavaScript code

I am using the OpenWeather API to display the current and five day forecast on my client's website.
I have some custom SVG icons that I want to use instead of the icons provided by OpenWeather. I have implemented the following switch statement to display a different icon depending on the weather condition.
let dailyCondition = value.weather[0].description;
let dailyCondtionIcon = "";
switch (dailyCondition) {
case "clear sky":
dailyConditionIcon = `<svg>icon</svg>`;
break;
case "few clouds":
dailyConditionIcon = `<svg>icon</svg>`;
break;
case "thunderstorm":
dailyConditionIcon = `<svg>icon</svg>`;
break;
case "light rain":
dailyConditionIcon = `<svg>icon</svg>`;
break;
}
Accessing the icons from template literal code works, but with lots of weather conditions in the switch statement, the code is very bloated. I would like to have the SVG icons stored in an external file and loaded from there.
How would I go about loading the external SVG icons into my vanilla JavaScript file?

If you prefer external svg files you could load them in a <use> element.
See also SVG use with External Source
You can combine all svg icons to a single sprite/asset library svg file and then loading each icon individually by a fragment identifier:
You js definitions might look something like this:
dailyConditionIcon = '<svg class="svgInline" fill="red" ><use href="sprite.svg#circle" /></svg>'
.svgAssets{
display:none
}
.svgInline{
display:inline-block;
width:1em;
height:1em;
font-size:32px;
}
<!-- this would be the content of your "sprite.svg" -->
<svg class="svgAssets" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 100 100" id="circle">
<circle cx="50%" cy="50%" r="50%"></circle>
</symbol>
<symbol viewBox="0 0 100 100" id="rect">
<rect x="0" y="0" width="100" height="100"></rect>
</symbol>
<symbol viewBox="0 0 100 100" id="rectFixedStyle">
<rect x="0" y="0" width="100" height="100" fill="#ccc"></rect>
</symbol>
</svg>
<!--
for demonstration the filenames are dropped.
The href of a hosted version would be e.g
<use href="sprite.svg#circle" />
-->
<p>
<svg class="svgInline" fill="red" >
<use href="#circle" />
</svg>
<svg class="svgInline" fill="green" >
<use href="#rect" />
</svg>
<svg class="svgInline" fill="green" >
<use href="#rectFixedStyle" />
</svg>
</p>
As you can see you also have some styling abilities like changing fill color.
However the styling options are limited (compared to fully inlined svg) and also depend on your svg structure:
E.g. Styles previously definded in your svg elements can't be overriden by a style set in use/svg tag.
For sprite creation I used: svgsprit.es

Exporting to SVG in fabric with svgs doesn't match canvas

We are using Fabric.js 1.7.20. We aren't able (yet) to update to 2.0+.
http://jsfiddle.net/tcem4f4L/
The issue is that we are adding SVG objects to the map, but when they get output to an svg, some padding within the SVG causes the rendering to not look correct. The svg x/y coordinates and any lines within them need to have the stroke accounted for.
I'm trying to figure out a clean way to handle these and ensure that the bounding box on the canvas is around the SVG for aligning purposes.
Example SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95" height="11" viewBox="0 0 95 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="95" height="11"></rect>
<path stroke-linecap="square" stroke-width="3" d="M1,9 l93,0"/>
</g>
</svg>
So (I think) to fix it on output to SVG, I'd need to change the rect x and y to 0.5 and the path to d="M1.5,9.5 l93,0"
I am worried that there are other things in this I'm missing.

Why doesn't my dynamically created <use> element show?

With JavaScript and jQuery I'm trying to replace a group element with a use element linking to another group element.
// Javascript
origgroup = $("#origgroup")[0];
repgroup = $("#referenceGroup1")[0];
origgroupParent = origgroup.parentNode;
use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute("xlink:href", "#origgroup2");
use.setAttribute("id", "newuse");
tmp = origgroupParent.replaceChild(use, origgroup);
// After this snippet is run, "targetsvg" and "control" are identical. Except that targetsvg's use-tag has an unique ID.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- My "atlas". I want to put <use> elements in "targetsvg" below, linking to these groups. -->
Atlas <br>
<svg id="atlas" width="120" height="70" version="1.1">
<g id="referenceGroup1">
<rect x="10" y="10" width="90" height="20" fill="green"/>
<circle cx="20" cy="40" r="15" fill="blue"/>
</g>
<g id="referenceGroup2">
<rect x="40" y="10" width="90" height="20" fill="red"/>
<circle cx="50" cy="40" r="15" fill="orange"/>
</g>
</svg>
<br> Target <br>
<!-- My target -->
<svg id="targetsvg" width="120" height="70" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="origgroup">
<rect x="40" y="10" width="90" height="20" fill="red"/>
<circle cx="50" cy="40" r="15" fill="orange"/>
</g>
</svg>
<br>
Control
<br>
<!-- This is identical to the javascript modified version of "targetsvg" -->
<svg id="control" width="120" height="70" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#referenceGroup1"></use>
</svg>
What I expect to happen is for there to be a blue circle and a green rectangle under "Target". If I inspect the resulting svg of "targetsvg" it's identical to the svg under "Control". This leads me to believe that "targetsvg" is not redrawn for some reason, is this correct? Is there a way to force that?
I've spent the last five hours searching, but I can't find anything similar. The most relevant I've found is
SVG <use> in Chrome doesn't work
But that uses Angular, which I'm not. I think the cause is the same ("the relative hash link in the element would not correctly resolve."). But if this is the case, how do I resolve this without Angular?
Thanks!
[Background: I have a huge svg-file generated from illustrator. In this file there are a number of fairly complex elements (groups of groups et.c.) that I need to have different versions of. These elements will need to appear on multiple places in the final result, so I either need to have multiple copies of them (Showing/hiding depending on the situation) or some kind of 'atlas' where I pick and replace. My gut says the latter will be more maintainable since there are at least four places and seven "versions" (Think "green", "green with symbol x", "red with symbol y" et.c.). If there are other options, I welcome those.]

Minutes after posting, I realized it was a namespace problem. Changing the JavaScript to:
origgroup = $("#origgroup")[0];
repgroup = $("#referenceGroup1")[0];
origgroupParent = origgroup.parentNode;
// Namespaces
var svgns = 'http://www.w3.org/2000/svg',
xlinkns = 'http://www.w3.org/1999/xlink'
use = document.createElementNS(svgns, "use");
// **setAttributeNS** instead of setAttribute as originally.
use.setAttributeNS(xlinkns, "xlink:href", "#referenceGroup1");
use.setAttribute("id", "newuse");
tmp = origgroupParent.replaceChild(use, origgroup);
Solved my problem.

Two svgs next to each other horizontally

Is it possible to have multiple SVGs that are next to each other horizontally. I know that when you append a SVG in D3, it appends in below the previous SVG. But now I have the previous SVG on half the page, and I want to translate this SVG from below the previous SVG to the right of the previous SVG. I tried using the transform-->translate attribute on the second svg but it did not work:
var secondSVG= d3.select("#div1").append("svg").attr("width",960).attr("transform"),"translate(500, -500)");

In Chrome 24, IE10, and FF17 this jsFiddle worked as expected. The key seemed to be setting the width and height stylesheet properties.
HTML:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" id="svg2">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
CSS:
svg
{
width: 190px;
height: 190px;
}

Awhile back I wanted to do something similar, but I eventually settled on using a single svg element with two internal g elements, one of them transformed to the right. You can see the eventual finished product here.

General idea: Wrap each SVG in a div element that is displayed as inline-block.
This works with the following approach that I personally like anyway.
Set the width and height attributes of the SVGs to 100%.
"Inner impact": Specify the size of the drawing area (which the units of the elements in the SVGs, like circle, relate to) with the viewBox attribute; this typically goes together with the preserveAspectRatio attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
"Outer impact": The SVGs will adapt to the size of their container. Style it (width and/or height) according to your wishes. Of course you need enough horizontal space.
Minimal example:
<div style="display: inline-block; width: 42%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet">
<circle cx="0" cy="0" r="39">
</svg>
</div>
<!-- Just a copy from above. Right of (not below) the previous SVG. -->
<div style="display: inline-block; width: 42%">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-80 -45 160 90" preserveAspectRatio="xMinYMin meet">
<circle cx="0" cy="0" r="39">
</svg>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Use javascript to overlap two svgs, and save file - javascript

Is it possible to load two SVGs with JavaScript? For example, then use the first SVG as the base and the second SVG as a badge in the corner and then scale the combination as one and save as a single SVG?

Related

Url in side of svg xmlns

Load external SVG icons into vanilla JavaScript code

Exporting to SVG in fabric with svgs doesn't match canvas

Why doesn't my dynamically created <use> element show?

Two svgs next to each other horizontally

Categories

Resources