JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<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"
	 viewBox="0 0 793.186 793.186" style="enable-background:new 0 0 793.186 793.186;" xml:space="preserve">
<ellipse transform="matrix(1 -0.0025 0.0025 1 -0.9727 0.9751)" cx="396.593" cy="396.592" rx="396.593" ry="396.593"/>
<g>
	<path style="fill:#E5005B;" d="M362.657,364.741l0.001-46.783l16.806,0.001c4.939,0,8.843,1.024,11.712,3.07
		c2.869,2.047,4.305,4.647,4.305,7.803c0,2.858-0.813,5.242-2.436,7.151s-3.979,3.321-7.065,4.235
		c3.339,0.595,6.036,1.853,8.095,3.773c2.058,1.92,3.086,4.436,3.086,7.545c0,4.162-1.795,7.403-5.385,9.724
		c-3.59,2.321-8.449,3.481-14.577,3.48H362.657z M373.907,356.098h4.082c2.652,0.001,4.613-0.507,5.881-1.524
		c1.27-1.018,1.904-2.338,1.904-3.962c0-1.737-0.715-3.069-2.143-3.996c-1.43-0.926-3.413-1.389-5.951-1.39h-3.773L373.907,356.098z
		 M373.907,336.582h3.361c2.058,0.001,3.709-0.467,4.956-1.405c1.246-0.937,1.87-2.229,1.87-3.875c0-1.486-0.555-2.642-1.664-3.465
		s-2.647-1.234-4.613-1.235h-3.91V336.582z"/>
	<path style="fill:#E5005B;" d="M401.414,347.799c0-5.602,1.578-10.032,4.732-13.29c3.156-3.259,7.409-4.888,12.76-4.888
		c4.46,0,7.999,1.337,10.616,4.014c2.617,2.675,3.927,6.322,3.927,10.941c0,1.783-0.205,3.682-0.614,5.693l-19.897-0.001
		c0.068,2.014,0.801,3.603,2.195,4.769c1.395,1.165,3.43,1.748,6.105,1.748c3.957,0,7.311-0.561,10.063-1.684l1.396,7.446
		c-3.663,1.921-7.952,2.88-12.866,2.88c-5.831,0-10.358-1.605-13.582-4.818C403.026,357.398,401.414,353.127,401.414,347.799z
		 M413.007,343.238h9.981c0.09-0.365,0.137-0.766,0.137-1.2c0-1.555-0.406-2.818-1.218-3.79s-1.927-1.458-3.345-1.458
		c-1.737,0-3.098,0.572-4.081,1.715C413.498,339.648,413.007,341.226,413.007,343.238z"/>
	<path style="fill:#E5005B;"...

CSS

#Layer_1{
  transform: rotate(-7deg) scale(0.912);
  transform-origin: center center;
}

JavaScript

/**
 * OJO Logo SVG processor
 */
 
var g_paths,
    reorder,
    target;

target  = document.querySelector('svg#Layer_1');
g_paths = Array.apply(null, target.querySelectorAll('g'));
reorder = [];

g_paths.forEach(function(group){
	var elip = Array.apply(null, group.querySelectorAll('ellipse'));
  elip.forEach(function(single){
  	group.removeChild(single);
  });
	reorder[reorder.length] = {
  	node: group,
    yPos: group.getBoundingClientRect().top,
    xPos: group.getBoundingClientRect().left
  }
  group.parentNode.removeChild(group);
});

reorder.sort(function(a, b){
	return (a.yPos !== b.yPos ? (a.yPos - b.yPos) : (a.xPos - b.xPos));
});

console.table(reorder);

reorder.forEach(function(group){
	if(group.node.innerHTML.match(/\S/igm)){
		target.appendChild(group.node);
  }
});