0

I'm a programmer with almost zero knowledge of graphics and svg structure. But I would like to know if it is possible to break this kind of svg file into multiple ones. Or at least access only one image at a time. (I'm using javascript and FabricJS if it matters in this case).

I did open the svg file and saw there are multiple path's and each one correspond to one sillhoute. But they have no identification as long as I see.

The question is: Is there simpler/automatic way to separate this file into multiple ones, or I would have to write a script to break each path into a separate file?

  • If you are a programmer you might want to check out open source software Inkscape's command line interface. It allows you to "query" for objects inside an SVG image and perform all kinds of operations on paths using so called "verbs". Using a mix of queries and verbs you should be able to extract and save all subpaths as separate SVG images. tavmjong.free.fr/INKSCAPE/MANUAL/html/CommandLine.html – filip Feb 10 '17 at 19:38
2

SVG is merely a collection of XML data. Like any XML data, it can be broken apart and separated.

The ease of separating things depends a great deal upon original construction and available tools.

The XML is basically a set of declared path objects:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
     width="643.399px" height="478.702px" viewBox="0 0 643.399 478.702" enable-background="new 0 0 643.399 478.702"
     xml:space="preserve">

     <path fill-rule="evenodd" clip-rule="evenodd" d="M122.758,217.206c0.74,0.16,1.479,0.314,2.218,0.474
    c0.827-0.546,1.652-1.09,2.481-1.635c0.033-0.053,0.071-0.106,0.103-0.158c-0.277-0.303-0.703-0.461-0.894-0.845
    c-0.255-0.444,0.246-1.409-0.583-1.688c-0.095,0.214-0.204,0.328-0.422,0.421c-0.173,0.019-0.352,0.035-0.528,0.053
    c-0.258-0.326-0.491-0.559-0.314-1.056c-0.267-0.178-0.53-0.352-0.794-0.527c-0.003-0.492,0.082-0.633,0.264-0.896
    c-0.345-0.098-0.513-0.101-0.685-0.37c0-0.017,0-0.035,0-0.053c0.158,0.053,0.316,0.105,0.473,0.156
    c0.309-0.145,0.342-0.331,0.53-0.577c-0.088-0.282-0.177-0.564-0.265-0.848c-0.251,0.067-0.39,0.191-0.634,0.108
    c-0.156-0.102-0.087-0.01-0.156-0.213c-0.055-0.282,0.4-0.814,0.581-1.106c-0.314-0.286-0.675-0.289-0.793-0.792
    c0-0.089,0-0.177,0-0.264c0.234-0.113,0.468-0.102,0.737,0c0.125-0.211,0.249-0.423,0.371-0.634
    c-0.14-0.246-0.281-0.493-0.423-0.739c0.03-0.47,0.277-0.664,0.635-0.79c0.235-0.068,0.974,0.277,1.318,0.421
    c0.125-0.176,0.247-0.352,0.371-0.528c0.653,0.049,0.663,0.38,1.319,0.475c0.247-0.245,0.492-0.49,0.739-0.737
    c0.071,0,0.142,0,0.212,0c0.052,0.036,0.104,0.068,0.156,0.104c0.019,0.052,0.035,0.106,0.054,0.158
    c-0.577-0.007-0.69,0.141-0.951,0.423c-0.017,0.052-0.035,0.105-0.055,0.158c0.161,0.105,0.32,0.212,0.478,0.316
    c0.191-0.264,0.385-0.526,0.58-0.79c0.246,0.034,0.493,0.069,0.739,0.104c0.285,0.147,0.557,0.662,0.633,1.005
    c0.546-0.723,1.091-1.442,1.637-2.166c-0.158-0.313-0.441-0.665-0.212-1.055c0.209-0.313,0.817-0.127,1.057,0
    c0.035-0.068,0.071-0.141,0.106-0.212c0.108-0.378-0.188-0.853-0.264-1.212c-0.303-1.403-0.293-3.493,0-4.329
    c1.782-0.485,4.136,2.588,5.33,3.377c0.615-0.543,1.233-1.09,1.847-1.636c1.163-0.934,2.078-2.28,3.482-2.954
    c1.355,0.038,4.566,2.284,5.7,2.954c1.53,0.904,2.999,1.995,4.223,3.222c0.511,0.596,1.022,1.193,1.53,1.793
    c0.422,0.229,0.843,0.457,1.266,0.685c0.229,0.317,0.459,0.633,0.686,0.951c1.04,1.005,3.245,1.764,4.012,2.957
    c0.263,0.897,0.529,1.794,0.792,2.688c0.527,1.128,1.055,2.251,1.583,3.379c0.124,1.177,0.246,2.357,0.368,3.536
    c0.575,3.255,0.644,7.449,1.796,10.134c0.377,0.221,0.932,0.062,1.423,0.262c0.178,0.141,0.354,0.281,0.528,0.424
    c0.018,0.053,0.035,0.107,0.053,0.158c-0.316,0.51-0.635,1.02-0.948,1.528c0.088,0.614,1.269,1.168,1.688,1.69
    c0.59,0.742,1.546,1.723,1.899,2.587c0.146,0.357-0.132,0.609,0,0.949c0.094,0.241,0.495,0.355,0.634,0.635
    c0.219,0.598-0.336,4.275-0.686,4.484c-0.177-0.087-0.353-0.175-0.527-0.264c-0.409,0.929-0.43,1.196-1.531,1.425
    c-0.625,4.173-1.804,7.799-2.746,11.823c-0.334,1.424-0.206,3.773-1.267,4.487c-1.021,0.684-2.509,0.694-3.903,0.999
    c-6.173,1.36-13.677-2.308-18.05-4.328c-0.632,1.831-1.265,3.659-1.899,5.49c-1.818,4.687-3.376,9.218-5.226,13.825
    c-0.598,1.234-1.196,2.465-1.793,3.696c-0.178,0.266-0.354,0.528-0.527,0.792c-0.139,0.557,0.282,1.26,0.159,1.794
    c-0.296,1.249-1.271,2.207-1.691,3.325c-0.986,0.281-2.162,0.248-3.166,0c-0.399,1.457-1.558,3.019-2.852,3.591
    c-0.052,0.067-0.104,0.14-0.156,0.208c1.421,0.003,2.577,0.626,3.166,1.478c0.248,0.477,0.493,0.951,0.74,1.425
    c0.301,0.324,0.895,0.261,1.161,0.634c0.247,0.562,0.491,1.126,0.737,1.688c0.034,0.044,1.32,1.281,1.371,1.319
    c0.668,0.481,1.439,0.754,1.904,1.427c0.21,0.438,0.421,0.878,0.634,1.318c0.666,0.845,1.334,1.688,2.003,2.533
    c3.621,4.518,6.819,9.417,10.185,14.195c1.259,1.785,4.088,5.352,4.486,7.651c0.302,1.732-0.47,3.229-0.845,4.436
    c-0.457,1.653-0.914,3.306-1.371,4.963c-1.445,4.874-2.547,9.927-4.012,14.566c-0.403,1.334-0.809,2.671-1.213,4.008
    c-0.703,0.932-1.408,1.865-2.111,2.796c-0.387,0.722-0.773,1.444-1.16,2.167c-0.247,0.418-0.493,0.844-0.739,1.264
    c0.104,0.405,0.211,0.812,0.317,1.214c-0.317,0.653-0.633,1.302-0.95,1.955c0,0.614,0,1.23,0,1.848
    c-0.62,3.059-1.629,7.848-0.318,10.871c0.057,0.264-0.146,0.401-0.209,0.633c0.017,0.649,0.034,1.3,0.051,1.954
    c0.335-0.107,0.669-0.213,1.001-0.316c0.09,0.753,0.178,1.51,0.265,2.266c0.278,1.549,0.403,3.165,1.162,4.275
    c0.298,0.214,0.599,0.423,0.896,0.634c0.354,0.422,0.704,0.846,1.056,1.267c1.985,1.425,3.461,1.865,4.803,4.012
    c-0.421,0.737-0.844,1.478-1.268,2.216c-0.973,0.801-6.536,1.514-8.338,0.949c-1.981-0.615-5.729-3.172-6.913-4.643
    c-0.949-1.179-1.901-2.358-2.852-3.537c-0.632-0.088-1.265-0.175-1.898-0.264c-2.603-0.537-5.226-0.604-8.497-0.58
    c-0.072,0.211-0.141,0.424-0.212,0.633c-0.915,0.123-1.83,0.246-2.745,0.369c-2.889,0.489-4.605,0.072-5.225-2.109
    c-0.016-0.474-0.034-0.951-0.052-1.425c-0.264-0.827-1.153-1.543-1.426-2.483c-0.367-1.262,0.437-2.097,0.422-3.06
    c-0.015-1.049-1.285-2.442-1.952-2.956c0.033-1.257,0.7-1.45,0.896-2.426c0.325-1.6-0.534-2.624-0.739-3.747
    c-0.093-0.515,0.111-0.724-0.051-1.162c0.635-0.837,2.201-5.308,1.74-6.387c-0.334-0.367-0.667-0.737-1.001-1.109
    c-0.875-1.379-2.409-4.483-2.007-6.965c0.575-3.517,0.169-7.727,0.739-11.293c0.055-1.214,0.107-2.429,0.16-3.643
    c0.189-0.996,1.338-3.224,1.107-4.168c-0.298-1.224-0.992-2.412-1.268-3.852c-0.201-1.063,0.072-2.362,0.373-3.062
    c0.128-0.31,0.599-0.652,0.525-1.109c-0.282-0.704-0.562-1.408-0.843-2.109c-0.177-0.809-0.354-1.618-0.527-2.429
    c-0.267-2.514-0.528-5.031-0.794-7.546c-0.035-1.075-0.069-2.147-0.105-3.22c-0.125-1.04-0.247-2.078-0.369-3.114
    c-0.104-0.466-0.595-0.942-0.422-1.584c0.141-0.316,0.284-0.631,0.422-0.948c-0.262-0.124-0.527-0.25-0.789-0.37
    c-0.655-0.932-0.799-2.438-1.374-3.377c-1.39-2.273-2.716-4.501-3.483-7.496c-0.457-1.781-0.011-3.941,0.263-5.594
    c0.071-0.948,0.141-1.899,0.212-2.85c0-0.527,0-1.058,0-1.584c0.382-1.555,0.537-3.406,1.001-4.906
    c0.438-0.968,0.879-1.937,1.321-2.902c0.193-0.196,0.386-0.388,0.581-0.581c0.069-0.915,0.138-1.83,0.211-2.746
    c0.175-0.669,0.351-1.336,0.527-2.008c-1.046,1.071-1.194,3.147-2.902,3.54c-0.803-3.127,2.154-6.727,3.375-8.708
    c-0.117-1.333-0.843-2.21-1.16-3.272c-0.363-1.222-0.353-2.345-0.581-3.694c-0.053-0.546-0.106-1.089-0.158-1.635
    c0.368-1.215,0.738-2.428,1.107-3.644c0.348-1.175,0.364-2.39,0.581-3.747c0.371-2.306-0.885-3.557-1.268-5.173
    c-0.315-1.336,1.288-3.975,1.796-4.801c1.628-2.648,3.983-4.987,5.91-7.39c0.582-0.668,1.163-1.336,1.743-2.002
    c1.576-1.192,4.908-2.122,5.752-3.855c0.158-1.426,0.316-2.85,0.474-4.275C119.408,216.607,121.167,216.832,122.758,217.206z
     M131.89,203.379c-0.03,0.203-0.042,0.251,0.052,0.422c0,0.033,0,0.068,0,0.105c0.036,0.018,0.07,0.032,0.104,0.05
    c0.159-0.227,0.317-0.456,0.477-0.684c-0.037-0.018-0.072-0.036-0.107-0.053C132.241,203.273,132.066,203.324,131.89,203.379z
     M126.137,205.752c0.14,0.071,0.281,0.142,0.422,0.211c0.124-0.088,0.246-0.177,0.37-0.264c0-0.018,0-0.034,0-0.053
    c-0.052-0.089-0.106-0.176-0.16-0.264C126.335,205.382,126.277,205.475,126.137,205.752z M128.513,205.912c0,0.021,0,0.035,0,0.052
    c0.784-0.214,1.104,0.066,1.53,0.475c-0.059-0.544-0.277-0.68-0.528-1.004C128.976,205.433,128.733,205.607,128.513,205.912z
     M124.552,205.593c-0.034,0.072-0.071,0.144-0.104,0.212c-0.125,0.285-0.007,0.658,0.053,0.898c0.173-0.126,0.21-0.207,0.475-0.266
    c-0.096-0.363-0.081-0.415,0.104-0.686c-0.035-0.053-0.07-0.105-0.104-0.159C124.835,205.593,124.694,205.593,124.552,205.593z
     M123.762,207.653c-0.017,0.034-0.034,0.069-0.054,0.105c0.066,0.387,0.249,0.425,0.581,0.527c-0.087-0.209-0.175-0.422-0.264-0.633
    C123.938,207.653,123.85,207.653,123.762,207.653z M123.708,209.448c0.242,0.023,0.214,0.057,0.369-0.052
    c-0.035-0.037-0.068-0.072-0.103-0.108C123.887,209.342,123.797,209.396,123.708,209.448z M124.289,211.611c0,0.177,0,0.353,0,0.525
    c0.141,0.293,0.334,0.31,0.582,0.476c0.051,0.021,0.105,0.038,0.157,0.054c0.018-0.14,0.037-0.279,0.053-0.422
    c-0.231-0.234-0.443-0.341-0.58-0.686C124.43,211.576,124.36,211.593,124.289,211.611z M124.922,213.406
    c0.106,0.071,0.211,0.138,0.318,0.211c0.158-0.052,0.315-0.106,0.475-0.16c0.019-0.034,0.037-0.068,0.051-0.104
    c-0.419,0.001-0.608-0.078-0.738-0.369C124.935,213.101,124.924,213.166,124.922,213.406z M155.69,215.833
    c0.177,0.087,0.353,0.177,0.529,0.265c0.609-0.01,1.25-0.171,1.583-0.477c-0.23-0.386-0.457-0.772-0.686-1.159
    C156.515,214.54,155.966,215.413,155.69,215.833z M152.736,220.53c0.033,0.945,0.35,1.506,0.526,2.216
    c0.124,1.581,0.248,3.168,0.371,4.751c-0.123,0.157-0.247,0.315-0.371,0.476c-0.974-0.103-0.86-0.981-1.793-1.109
    c-0.329,0.232-0.645,0.411-1.107,0.528c0.121,0.455,0.31,0.637,0.158,1.161c-0.331,0.209-0.578,0.415-1.109,0.424
    c-0.404-0.371-0.81-0.74-1.213-1.111c-0.455,0.771-1.381,0.337-1.849-0.053c-0.169,0.233-0.299,0.766-0.527,0.951
    c-0.663,0.322-1.633-0.128-2.108-0.369c-0.796,0.502-0.631,1.397-1.849,1.213c0.088,0.211,0.176,0.422,0.264,0.633
    c-0.053,0.122-0.104,0.249-0.159,0.37c-0.686,0.115-1.327,0.018-1.899,0.317c-0.156,0.088-0.158,0.142-0.265,0.264
    c-0.017,0.051-0.036,0.104-0.052,0.159c1.73,1.075,3.2,2.288,4.011,4.274c0.156,0.615,0.315,1.229,0.475,1.847
    c0.232,0.338,0.917,0.397,1.214,0.686c0.281,0.275,0.715,1.301,0.895,1.425c0.652,0.211,1.303,0.423,1.952,0.633
    c1.179,0.721,2.358,1.443,3.537,2.163c0.986,0.987,1.971,1.97,2.954,2.957c1.054-2.731,1.585-5.548,2.219-8.708
    c0.249-1.248,0.049-2.641,0.422-3.96c0.227-0.475,0.457-0.95,0.685-1.425c0.018-0.737,0.036-1.477,0.055-2.214
    c0.14-0.071,0.281-0.142,0.423-0.212c0.114-0.913-0.635-2.007-0.952-2.746c-0.604-1.408-1.263-2.626-1.954-3.904
    c-0.333-0.686-0.667-1.372-1.002-2.059c-0.314-0.229-0.633-0.455-0.949-0.688C153.404,219.79,153.069,220.16,152.736,220.53z
     M146.613,225.806c-0.053,0.387-0.106,0.772-0.158,1.163c0.036,0.032,0.072,0.069,0.105,0.105c0.304-0.416,0.881-0.804,0.264-1.269
    C146.755,225.806,146.684,225.806,146.613,225.806z M147.563,226.916c-0.035,0.019-0.07,0.035-0.105,0.054c0,0.088,0,0.174,0,0.264
    c0.176,0.141,0.354,0.282,0.529,0.421c0.238-0.041,0.229-0.056,0.371-0.157c-0.072-0.248-0.144-0.495-0.213-0.739
    C147.95,226.809,147.757,226.863,147.563,226.916z M146.72,227.179c0,0.124,0,0.245,0,0.369c0.266,0.383,0.452,0.547,1.054,0.476
    c-0.27-0.355-0.529-0.659-0.79-1.055C146.895,227.039,146.808,227.109,146.72,227.179z M148.513,227.865c0,0.019,0,0.036,0,0.053
    c0.23,0.176,0.458,0.354,0.687,0.529c0.087,0,0.176,0,0.262,0c0-0.021,0-0.035,0-0.053c-0.153-0.32-0.357-0.4-0.579-0.635
    C148.761,227.794,148.635,227.831,148.513,227.865z M149.886,228.18c-0.105,0.091-0.212,0.18-0.316,0.267c0,0.069,0,0.14,0,0.21
    c0.069,0.019,0.14,0.036,0.211,0.052c0.193-0.134,0.272-0.225,0.581-0.262c0.016-0.035,0.034-0.071,0.052-0.106
    c-0.088-0.051-0.177-0.104-0.265-0.16C150.061,228.18,149.974,228.18,149.886,228.18z M123.815,320.697
    c0,2.329,0.075,4.927-0.369,7.018c-0.229,0.882-0.459,1.762-0.689,2.641c-0.843,1.057-1.687,2.111-2.533,3.168
    c-0.121,0.845-0.247,1.688-0.369,2.531c-0.123,0.439-0.246,0.879-0.37,1.32c0.159,0.491,0.318,0.984,0.477,1.479
    c0.053,0.614,0.104,1.23,0.158,1.847c0.306,1.942-0.59,4.063-0.423,5.646c0.21,0.984,0.423,1.97,0.634,2.955
    c0.446,2.444-1.065,5.719-1.741,7.23c0.546,0.715,1.532,1.288,1.689,2.375c-0.124,0.458-0.248,0.915-0.371,1.372
    c0.247,0.424,0.494,0.843,0.741,1.268c0.104,0.508,0.21,1.02,0.316,1.529c0,0.792,0,1.585,0,2.375
    c0.276,1.721,0.611,3.259,1.583,4.275c0.017,0.036,0.036,0.067,0.052,0.105c0.229-0.581,0.458-1.162,0.688-1.741
    c0.351-0.457,0.704-0.916,1.054-1.372c-0.455-0.511-0.914-1.022-1.372-1.532c1.198-1.636,2.836-3.288,3.431-5.486
    c-0.035-0.722-0.071-1.443-0.105-2.166c0.227-1.061,0.602-2.197,1.056-3.113c0.879-0.933,1.759-1.865,2.64-2.796
    c0.052-0.652,0.103-1.302,0.158-1.954c0.299-1.41,0.528-3.07,0.789-4.75c0.353-2.254-0.162-4.647,0.161-6.754
    c0.017-1.337,0.036-2.676,0.052-4.011c0.352-1.231,0.703-2.464,1.055-3.694c0.043-0.674-0.861-1.337-0.582-2.322
    c0.331-1.149,1.609-1.56,2.062-2.585c-0.34-0.245-0.453-0.426-0.583-0.899c-2.982-0.85-4.812-3.486-6.966-5.224
    c-0.755-0.704-1.512-1.409-2.271-2.111C123.85,318.445,123.831,319.572,123.815,320.697z"/>
        </svg>

This is the path data for 1 shape in the file.

enter image description here

You can copy/paste the paths to individual files the same as you would any code or markup structure.

Using a "what-you-see-is-what-you-get" editor such as Adobe Illustrator or Inkscape often makes things easier though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.