I need to include my Inkscape created .svg into an embedded .css.

In "that" .css existing .svg have the following syntax:

    --icon-triangle-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 21l12-18 12 18z'/></svg>");
    --icon-triangle-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M24 3l-12 18-12-18z'/></svg>");

However saving in .svg from Inkskape I get a different format, XML like, e.g.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="25"
   height="25.000002"
   viewBox="0 0 6.6145832 6.614584"
   version="1.1"
   id="svg1549">
  <title
     id="title1964">Ethernet</title>
  <defs
     id="defs1543" />
  <metadata
     id="metadata1546">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Ethernet</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     transform="translate(-42.02623,-25.655132)">
    <rect
       style="display:inline;fill:#ffffff;stroke:#000000;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
       id="rect61-1"
       width="6.0632143"
       height="6.0632148"
       x="42.325535"
       y="25.954439"
       ry="1.2831002"
       rx="1.2636179" />
    <path
       style="display:inline;fill:#0000ff;stroke:#ffffff;stroke-width:0.264583"
       id="path79-2-3"
       d="m 44.092765,30.917737 -0.150513,-0.06408 0.08941,0.136987 -0.123345,-0.107455 0.04271,0.157913 -0.0841,-0.140311 -0.0082,0.163381 -0.03663,-0.159432 -0.05827,0.152856 0.01443,-0.162948 -0.102651,0.12737 0.06408,-0.150513 -0.136986,0.08941 0.107454,-0.123344 -0.157912,0.04271 0.14031,-0.0841 -0.163381,-0.0082 0.159433,-0.03663 -0.152857,-0.05827 0.162948,0.01443 -0.127369,-0.102652 0.150512,0.06408 -0.08941,-0.136987 0.123344,0.107455 -0.04271,-0.157913 0.0841,0.140311 0.0082,-0.163381 0.03663,0.159432 0.05827,-0.152856 -0.01443,0.162948 0.102651,-0.12737 -0.06408,0.150513 0.136987,-0.08941 -0.107454,0.123344 0.157912,-0.04271 -0.14031,0.0841 0.16338,0.0082 -0.159432,0.03663 0.152857,0.05827 -0.162948,-0.01443 z" />
    <rect
       style="display:inline;fill:#000000;stroke:#ffffff;stroke-width:0.315486"
       id="rect1453"
       width="3.6962576"
       height="1.6749604"
       x="43.513519"
       y="28.073193"
       rx="0"
       ry="0" />
    <rect
       style="display:inline;fill:#000000;stroke:#000000;stroke-width:0.15014"
       id="rect1735-7"
       width="0.25122568"
       height="0.76614767"
       x="46.727772"
       y="29.636227"
       rx="0" />

etc

Is there any way I can make inkscape saving svg i nthe format I need?

Thanks!

Hi rs232,

It looks like your existing svg files also have an xml-like file structure, but they are condensed into a few lines, instead of ~50 lines, like the Inkscape svg file. Is there a reason why you need to embed the svg files into the CSS code, instead of linking to them?

If you look at the <rect ... /> tags in the Inkscape-generated file, you will see that they contain essentially the same information as your existing svg triangle files, but with carriage returns at the end of each attribute. Same for <path ... />. You could just copy and paste those tags and get rid of carriage returns. Hope this helps a little.

Yes this must be kept within a single file only, as it's part of an embedded firmware and this is statically looking for a single .css.

I have actually found the issue: I had to escape all the #

So ordered everything in one line, replaced # with \#  and it all worked :-)

That's great! I am glad to hear it is working for you!