: Photoshop - Overlapping two .svg files into one I have two .svg files that I overlapped on top of each other into a new group in photoshop. I want to be able to export this into a new
I have two .svg files that I overlapped on top of each other into a new group in photoshop. I want to be able to export this into a new singular .svg file but when I export it as SVG in PS, it appears it just references the two files with the xlink:href attribute, and doesn't actually give me a new .svg with the respective new vector paths.
tl;dr How do I get the correct .svg file from combining two .svgs in PS?
For Reference:
SVG 1
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60" height="60" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<rect x="13.003" y="16" transform="matrix(1 -0.0012 0.0012 1 -0.0329 0.0299)" fill="#5D4037" width="22" height="21"/>
<g>
<rect x="10" y="19" fill="#D7CCC8" width="3" height="16"/>
<polygon fill="#D7CCC8" points="21,19 18,19.008 18.014,35.008 21,35.004 	"/>
<polygon fill="#D7CCC8" points="30,19 27,18.996 27.014,34.996 30,35 	"/>
<rect x="35" y="19" fill="#D7CCC8" width="3" height="16"/>
</g>
<path fill="#8D6E63" d="M40,16.984c0,0.55-0.445,1.015-1,1.016H9.004c-0.552,0.001-1-0.426-1.001-0.977L8,14.034 	c-0.001-0.551,0.446-0.997,0.998-0.997L38.996,13c0.553-0.001,0.998,0.445,1,0.995L40,16.984z"/>
<g>
<polygon fill="#BCAAA4" points="42,42 6.022,42 6,39 42,39 	"/>
<path fill="#BCAAA4" d="M13.993,18.012l0.001,1c0.001,0.553-0.446,0.987-0.999,0.988h-3C9.443,20,9.001,19.571,9,19.019v-1 		L13.993,18.012z"/>
<path fill="#BCAAA4" d="M21.999,18L22,18.994c0.001,0.553-0.446,1.005-0.999,1.006h-3c-0.552,0-1-0.446-1.001-0.999V18H21.999z"/>
<path fill="#BCAAA4" d="M30.992,18l0.002,0.991c0,0.553-0.447,1.009-0.999,1.009h-3C26.443,20.001,26,19.551,26,18.998V18H30.992z"/>
<path fill="#BCAAA4" d="M39,18v0.981C39,19.534,38.547,20,37.995,20h-3C34.443,20.001,34,19.54,34,18.987V18H39z"/>
<path fill="#BCAAA4" d="M14,36.012v-1c-0.001-0.553-0.436-1.013-0.988-1.012h-3C9.46,34,8.999,34.466,9,35.019v1L14,36.012z"/>
<path fill="#BCAAA4" d="M22,36v-0.998c-0.001-0.553-0.436-0.999-0.988-0.998l-3,0.004c-0.552,0-1,0.448-0.999,1.001L17.015,36H22z"/>
<path fill="#BCAAA4" d="M31,36v-1.009C30.999,34.438,30.551,34,29.998,34h-3c-0.552,0.001-0.999,0.445-0.998,0.998L26.001,36H31z"/>
<path fill="#BCAAA4" d="M39,36l-0.001-1.019C38.998,34.429,38.55,34,37.997,34h-3c-0.552,0.001-0.998,0.435-0.997,0.987V36H39z"/>
<polygon fill="#BCAAA4" points="42,14 23.978,6 6,14.021 6,16 42,16 	"/>
</g>
<g>
<rect x="8.017" y="36" fill="#A1887F" width="31.981" height="3"/>
<polygon fill="#A1887F" points="10.988,14 36.988,14 23.98,8 	"/>
</g>
</svg>
SVG 2
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" width="25" height="25">
<polygon fill="#8BC34A" points="24,3 28.7,6.6 34.5,5.8 36.7,11.3 42.2,13.5 41.4,19.3 45,24 41.4,28.7 42.2,34.5 36.7,36.7 	34.5,42.2 28.7,41.4 24,45 19.3,41.4 13.5,42.2 11.3,36.7 5.8,34.5 6.6,28.7 3,24 6.6,19.3 5.8,13.5 11.3,11.3 13.5,5.8 19.3,6.6 	"/>
<polygon fill="#CCFF90" points="34.6,14.6 21,28.2 15.4,22.6 12.6,25.4 21,33.8 37.4,17.4 "/>
</svg>
COMBINED SVG 1 + 2
<svg id="uni-approved" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" viewBox="0 0 250 250">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image x="31" y="31" width="188" height="188" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAC8CAMAAAD1lzSZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA51BMVEUAAAC8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqS8qqSslo6NbmONbmONbmONbmONbmONbmONbmONbmONbmORc2ihiH+hiH+mj4ahiH+8qqSynZa1opukjIShiH+okYi0n5i6qKKvmZKjioG5pp+tl4+rlY2pk4uljISNbmOZfXOTdmuWeW9dQDeNdW6kkImqlpCBaGCHbmdjRz62o51pTUWwnZZ7YVl1W1KSfHRvVEvQxL+5qaSMdW2jj4nXzMh8Y1uahoCYgnueiYJ/ZFuXf3ajjIQAAADlaoVsAAAAH3RSTlMAUK+fQBBg378ggO9wMI/Pv4BwYCCfjxC/r88ggJ9AgW1hUwAAAAFiS0dEAIgFHUgAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfhBRkOCw767ywkAAAEHUlEQVR42u2da1PaQBiFQS4SUNCqbbXagKB46UVRFBCkaL3///9TpQ7K5j2bDSQkGc/z+RUeMydnks1sSCQCJDmXSgf5+cGRyc7bz+SyYYt4x8oX7FfmFzJh23hiMWW/p1C0wjYyJpmzHcQj/K9RdxL98Gfeou4k2uG3Urae6IY/nbMNiGT4UdSjH34U9XIl8uFHUS9vV6u1nUiHH0R9t75XHbJdjmz4QdT3D17Vh/r13QiGP5MH6ofVcfbq+xELv5WSz9JKrSpwKOuHE/70HDhLRfUXanL1zD782RIuGEwNnLuzDD+K+qhgMKh6ZhV+FPWxgsHsgeoppIIPP4q6o2A0+gfyuWvPBRv+LLj2qtSM1XXVY5cCC39mAVx7lT2q66pnPh9E+K0iuM3QF4z36vE//Glw7WVQMBhUPf6GH0XdsGAwqHp8Cz+MuoeC0eij6vEj/DDqXgsGg6pn2vAvojvqSQoGg6pnmvAn0R31pAWj0Ufn7mThh4tHUxUMBlaP9/BbaPFo6oLBwOrxFn4YdV8KRqOPqsc8/DDq/hUMBlWPUfhh1H0uGAysHrfw43VS/wtGo4/OXV344TppQAWDgdWDwg/XSfdnrf4CrB4p/DDqAReMRh9Wz3j4cdQrP0JSHwKr5y38+JHAzowKBgOr53/48SOBWRaMRn8H+ZWSCTu+5ChPecrHB8pT/uPJ50cs/YwFSyPh99fGy79iwbJ4N0J5yn80+U9ha5mxIsqvhq1lxqq8brMWtpcJn8Gi05evYZu5swaXzBIr6xu/IcrHHMHBY+lbj+H4kTKJDTbWVxI60vhSojHOCRw8bQicwvETZRIbuK1zU57ylI+RfAb+ZVP5jjNjG5f/9UyZbMLJhBtz6C/Ple9otdFkR5LvoOkLdRIelZSrvAWW6p1Z6BoeSRennmnCSgYPky1pzbt9Kej0LqQD2W0AutJ4sy9MXorH3exBuJX+M86g15J9+lfK5HW/oaF/rYxfgfFWb6BMps2f4f8dZwB1bpTJ24aWW2X8Bk4OlEljdcpTnvKUpzzlKU95ylOe8pSnPOUpT3nKU57ylKc85SlPecpTnvKUpzzlKU95ylOe8pSnPOUpT3nKU57ylKc85SlPecpTnvKUl1+M35T2nbVOnHvO2ncd5NO5awvj0vaxrrC30exNs+BleM79dS15+2Qb7Drrt03H72SDnLt7Huw/dG5ARDtc2+JePLiJU92qCjdM2nlXefiTSvfqkUSDjs2nQ87huJpIuB+24Obux07ke0n+Ho5zGzXlKf/R5L9tPrNVhzyM8wgHnx4EnuD4ozKJDbZeDL+L8t/Dfh2rGZuUpzzlKU95ykcVylOe8jGVL40u9XcrseDtRyRyCaNfYY4mlKc85WME5SlP+RhBecpPJF/MxZbiP0lIPYqktCMCAAAAAElFTkSuQmCC"/>
<image x="134" y="135" width="92" height="92" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAMAAADUMSJqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAARVBMVEUAAACLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qLw0qXzlfI+4zM/5CPx06j2mSTy1MAAADuB0bVAAAAD3RSTlMAYFCPIM9A74AQv3Awr99SGTiPAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+EFGQ4LDvrvLCQAAAJsSURBVGjetZrbloMgDEWtV+qltJb5/18d6zgWgoAnmPNou3aRhCQkLQpEtxL6OqRK60oIXTd6UVNLsNtOr+ra69lK71IXo++9ttTfMxc6tNbmjp121I3fz+p2AF+lXBlNX6l24Qza07D8YquqfjWyxjx0ctapD+Q8nBB2rUEh/qlQOLLrDxT+QM0J6bxJJxx+2qSwORGTwuZETAqbEzApw5ynTVo2PHiTpNeKtSfbzqiYVUuGD7qaSoFFx5efv+jw8lmuHZbr9EM+0NbgwNss1vNJHrgFAiuc7OzXi9CJTbPY80zoxFuYx3JjE3pD4H0e26X3BF5lsh06rVaZjv5lL/T3/1Ma23m+aLNnsz+mpep4IVuPBM7xxRCbemJRdNexO8rGg0uQTUMLY8sjbLLpd3hTomzd2bcD+HzG2c4ZhU9Qim2dI/gApdn7QapDG/7OYOuujkZbQ1MAwt7ibigeGi8FQOw1Nt7C7EP6afaneiwj7AM6wP6UplWE7dERdhUwqPkSHDrCbkKuaMFtOsLeXPHoEB3SEfY3G6lTdIitooHLo0PsPhFyCR1iOyH3MFk4dIOwaYYeEvQZYZM0d5ygDY/tJejj0sJw2H5pEcjQhsP2iqJQNjIMtlfOBdOowdleIRouoQ3M9kroSHFhULZX/MeuLQZke9eW6JcNxqa+mLgqGoxNroqpushAbOKLyQr6B2GT4CLaWBBtiRSizZyLlj/FumiCDbS/5Yu1/lY6D36yDy3ZbpVtFIu2uEWb87JjBdGBiOwoR3QIJTo+kx38iY4sqa4dtvqvwnONk5IccMuO5gvRPxUsKjGf+wVD4E3VW0+p6QAAAABJRU5ErkJggg=="/>
</svg>
More posts by @Vandalay110
1 Comments
Sorted by latest first Latest Oldest Best
Photoshop is not a direct SVG editor. The short answer is... don't use Photoshop to edit SVG images.
While Photoshop has some vector tools and is capable of saving/exporting some vector data, it is not a vector image editor. The extent of vector editing within Photoshop relates to vector data created within the application itself. Photoshop can not edit external vector images. All Photoshop can do is rasterize everything, stack vector smart objects, and apply layer styles to a vector smart object.
You should use Illustrator, Inkscape, (or any vector object editor) or a text editor to alter SVG images.
Opening both images, stacking them, then saving as an svg with Illustrator...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="45px" height="45px" viewBox="-11.5 -11.5 45 45" enable-background="new -11.5 -11.5 45 45" xml:space="preserve">
<rect x="-2.748" y="1.001" transform="matrix(-1 0.0012 -0.0012 -1 22.0212 28.2389)" fill="#5D4037" width="27.5" height="26.25"/>
<g>
<rect x="-6.5" y="4.75" fill="#D7CCC8" width="3.75" height="20"/>
<polygon fill="#D7CCC8" points="7.25,4.75 3.5,4.76 3.518,24.76 7.25,24.755 "/>
<polygon fill="#D7CCC8" points="18.5,4.75 14.75,4.745 14.768,24.745 18.5,24.75 "/>
<rect x="24.75" y="4.75" fill="#D7CCC8" width="3.75" height="20"/>
</g>
<path fill="#8D6E63" d="M31,2.23c0,0.688-0.557,1.269-1.25,1.27H-7.745c-0.69,0.001-1.25-0.532-1.251-1.221L-9-1.458
c-0.001-0.689,0.558-1.246,1.248-1.246L29.745-2.75c0.69-0.001,1.247,0.556,1.25,1.244L31,2.23z"/>
<g>
<polygon fill="#BCAAA4" points="33.5,33.5 -11.473,33.5 -11.5,29.75 33.5,29.75 "/>
<path fill="#BCAAA4" d="M-1.509,3.515l0.001,1.25C-1.506,5.456-2.065,5.999-2.756,6h-3.75c-0.69,0-1.242-0.536-1.244-1.226v-1.25
L-1.509,3.515z"/>
<path fill="#BCAAA4" d="M8.499,3.5L8.5,4.743C8.501,5.434,7.942,5.999,7.251,6h-3.75c-0.69,0-1.25-0.558-1.251-1.249V3.5H8.499z"/>
<path fill="#BCAAA4" d="M19.74,3.5l0.002,1.239C19.742,5.43,19.184,6,18.494,6h-3.75C14.054,6.001,13.5,5.438,13.5,4.748V3.5H19.74
z"/>
<path fill="#BCAAA4" d="M29.75,3.5v1.226C29.75,5.417,29.184,6,28.494,6h-3.75C24.054,6.001,23.5,5.425,23.5,4.734V3.5H29.75z"/>
<path fill="#BCAAA4" d="M-1.5,26.016v-1.25c-0.001-0.691-0.545-1.267-1.235-1.266h-3.75c-0.69,0-1.267,0.582-1.265,1.273v1.25
L-1.5,26.016z"/>
<path fill="#BCAAA4" d="M8.5,26v-1.248c-0.001-0.69-0.545-1.248-1.235-1.247l-3.75,0.005c-0.69,0-1.25,0.561-1.249,1.252L2.269,26
H8.5z"/>
<path fill="#BCAAA4" d="M19.75,26v-1.262c-0.002-0.691-0.561-1.238-1.252-1.238h-3.75c-0.69,0.001-1.25,0.557-1.248,1.248
L13.502,26H19.75z"/>
<path fill="#BCAAA4" d="M29.75,26l-0.002-1.273c0-0.69-0.561-1.227-1.252-1.227h-3.75c-0.689,0.001-1.248,0.544-1.246,1.234V26
H29.75z"/>
<polygon fill="#BCAAA4" points="33.5,-1.5 10.973,-11.5 -11.5,-1.474 -11.5,1 33.5,1 "/>
</g>
<g>
<rect x="-8.979" y="26" fill="#A1887F" width="39.977" height="3.75"/>
<polygon fill="#A1887F" points="-5.265,-1.5 27.234,-1.5 10.975,-9 "/>
</g>
<polygon fill="#8BC34A" points="12.5,1.562 14.947,3.438 17.969,3.021 19.115,5.885 21.979,7.031 21.562,10.052 23.438,12.5
21.562,14.947 21.979,17.969 19.115,19.115 17.969,21.979 14.947,21.562 12.5,23.438 10.052,21.562 7.031,21.979 5.885,19.115
3.021,17.969 3.438,14.947 1.562,12.5 3.438,10.052 3.021,7.031 5.885,5.885 7.031,3.021 10.052,3.438 "/>
<polygon fill="#CCFF90" points="18.021,7.604 10.938,14.688 8.021,11.771 6.562,13.229 10.938,17.604 19.479,9.062 "/>
</svg>
While Photoshop has the ability to place and export SVG files, it is not designed to edit SVG paths and how they interact with one another. It can only stack one layer (svg) on top of another.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.