1

I'm trying to add this .svg image to my tex file but for some reason, it's not being interpreted correctly by Overleaf. The image I'm trying to add - SVG with correct text display Here's the .svg code -

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="662" height="548.328125" style="
        width:662px;
        height:548.328125px;
        background: #FFF;
        fill: none;
">
  <svg xmlns="http://www.w3.org/2000/svg" />
  <svg xmlns="http://www.w3.org/2000/svg" class="role-diagram-draw-area">
    <g class="shapes-region" style="stroke: black; fill: none;">
      <g />
    </g>
    <g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M276.74,242 L162.08,288.25" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(0.9273798710151121,-0.3741210697568289,0.3741210697568289,0.9273798710151121,160.22754491017963,289)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M392.97,242 L504.58,287.25" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(-0.926725494419827,-0.3757390823328433,0.3757390823328433,-0.926725494419827,506.4333333333334,288)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M279.19,135 L318.18,193.34" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(-0.5557153433806965,-0.8313726343411085,0.8313726343411085,-0.5557153433806965,319.29274611398966,195.00000000000006)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M271.35,49 L270.67,107" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(0.011693439485246033,-0.999931629399233,0.999931629399233,0.011693439485246033,270.6511627906977,109)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M133.25,315 L156.31,372.15" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(-0.3742829223794759,-0.9273145604459574,0.9273145604459574,-0.3742829223794759,157.06181818181818,374)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M534.83,314 L519,370.08" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(0.271776393576737,-0.9623604272279812,0.9623604272279812,0.271776393576737,518.4557823129252,372)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
    </g>
    <g>
      <g>
        <rect rx="0" ry="0" x="44" y="23" width="455" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="94" y="109" width="353" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="83" y="195" width="504" height="47" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="49" y="289" width="158" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="466" y="288" width="145" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="31" y="374" width="305" height="131" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="339" y="372" width="316" height="152" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
    </g>
    <g />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="660" height="546.328125" style="width:660px;height:546.328125px;font-family:Asana-Math, Asana;background:#FFF;">
    <g>
      <g>
        <g>
          <text x="48.328125" y="27.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">Objective: To determine the enthalpy changes of various reactions. </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="98.328125" y="113.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">Before we do so, we need to learn a few defintions. </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="87.328125" y="199.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">Now that we&#x27;ve learned these definitions, we can start finding the enthalpy </text>
        </g>
      </g>
      <g>
        <g>
          <text x="87.328125" y="220.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">changes of various reactions. </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="53.328125" y="293.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">Experimental methods</text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="470.328125" y="292.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">Theoretical methods</text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="35.328125" y="378.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">- Used to determine enthalpy change of </text>
        </g>
      </g>
      <g>
        <g>
          <text x="35.328125" y="399.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">combustion for various liquid (usually </text>
        </g>
      </g>
      <g>
        <g>
          <text x="35.328125" y="420.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">combustible liquid fuels)</text>
        </g>
      </g>
      <g></g>
      <g>
        <g>
          <text x="35.328125" y="462.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">- Used to determine enthalpy change when </text>
        </g>
      </g>
      <g>
        <g>
          <text x="35.328125" y="483.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">two liquids reacts (usually acids and bases). </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="343.328125" y="376.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">Rely on Hess&#x27;s law. </text>
        </g>
      </g>
      <g></g>
      <g>
        <g>
          <text x="343.328125" y="418.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">- Enthalpy change of formation for compounds</text>
        </g>
      </g>
      <g>
        <g>
          <text x="343.328125" y="439.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">are used.</text>
        </g>
      </g>
      <g></g>
      <g>
        <g>
          <text x="343.328125" y="481.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">- Bond enthalpies are also used to calculate </text>
        </g>
      </g>
      <g>
        <g>
          <text x="343.328125" y="502.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;dominant-baseline:text-before-edge;text-decoration:none solid rgb(0, 0, 0);">the enthalpy change accompying a reaction</text>
        </g>
      </g>
    </g>
  </svg>
</svg>

Here's my latex code -

\documentclass[12pt]{article}
\usepackage[utf8]{inputenc}
\usepackage{tikz}
\usepackage{pgfplots}
\usetikzlibrary{positioning}
\usepackage{float}
\usepackage[clean]{svg}
\usepackage{graphicx}

\title{Tikz learn}
\author{...}
\date{August 2022}


\begin{document}


\maketitle 
  \begin{figure}
    \centering
    \includesvg{Conceptchart1}
    \caption{Caption}
    \label{fig:my_label}
\end{figure}
\end{document}

What overleaf is interpreting this as - enter image description here

What should I do?

Benjamin Loison
  • 121
Vedant Rana
  • 195
  • 1
    overleaf just hosts a standard texlive, please edit the question to have the tex and svg as code blocks so someone can debug. Posting code as an image does not help anyone reproduce the problem. – David Carlisle Aug 29 '22 at 14:57
  • Your example code should allow someone to reproduce the problem. one code block should start \documentclass and end \end{document} the other should start <svg and end </svg> – David Carlisle Aug 29 '22 at 15:20
  • Sorry! It's my first time posting on Tex StackExchange. I've made the necessary corrections. – Vedant Rana Aug 29 '22 at 15:22
  • No, still no one can debug your issue or run the example document as you have not shown the svg – David Carlisle Aug 29 '22 at 15:23
  • 1
    I would recommend You to make .pdf from Your .svg and use it instead. Reason: no pixelation also. – WinnieNotThePooh Aug 29 '22 at 20:58
  • @WinnieNotThePooh This would need to regenerated the PDF file every time you would change the SVG file. With package svg this is done automatically. – mrpiggi Aug 31 '22 at 19:28
  • @mrpiggi Yes, but I think it is the fastest solution for now. Also it is very simple drawing and if we are talking about something than have to be done automatically, in this case better to use tikz – WinnieNotThePooh Aug 31 '22 at 19:49
  • Well, creating the PDF manually each time after editing an Inkscape graphic can be annoying or forgotten. Having an automatic process for this task seems reasonable to me. Processing and displaying input data is another matter. Inkscape is certainly not the right tool for such work. But that was not the topic. Nevertheless, I would certainly use tikz for a graphic like OP's one. – mrpiggi Sep 20 '22 at 21:03

3 Answers3

3

First of all some technical information. As LaTeX itself currently is not capable to process SVG files, package svg uses Inkscape to export those to PDF files, optionally with the support of rendering text snippets with LaTeX. If this feature of Inkscape is enabled, the SVG file is split to a PDF file with all graphics and a separate file *.pdf_tex with all text contents, which is then used as an overlay for the graphics.

Unfortunately, during this export, the property dominant-baseline is ignored and so the resulting overlay is vertically displaced. Maybe something, which should be reported to the Inkscape team, I only found one maybe related issue (https://bugs.launchpad.net/inkscape/+bug/811862).

Follow-up: The issue was bumped recently: https://gitlab.com/inkscape/inkscape/-/issues/1170

This leaves you two options:

  1. drop the rendering of the text snippets with LaTeX by using \svgsetup{inscapelatex=false}
  2. change all properties dominant-baseline:text-before-edge to dominant-baseline:auto (or drop it at all) and vertically rearrange the text boxes

BTW: clean is only a valid option for package svg-extract and not package svg

See the example for the latter option:

\begin{filecontents}[noheader]{rearranged.svg}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="662" height="548.328125" style="
        width:662px;
        height:548.328125px;
        background: #FFF;
        fill: none;
">
  <svg xmlns="http://www.w3.org/2000/svg" />
  <svg xmlns="http://www.w3.org/2000/svg" class="role-diagram-draw-area">
    <g class="shapes-region" style="stroke: black; fill: none;">
      <g />
    </g>
    <g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M276.74,242 L162.08,288.25" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(0.9273798710151121,-0.3741210697568289,0.3741210697568289,0.9273798710151121,160.22754491017963,289)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M392.97,242 L504.58,287.25" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(-0.926725494419827,-0.3757390823328433,0.3757390823328433,-0.926725494419827,506.4333333333334,288)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M279.19,135 L318.18,193.34" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(-0.5557153433806965,-0.8313726343411085,0.8313726343411085,-0.5557153433806965,319.29274611398966,195.00000000000006)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M271.35,49 L270.67,107" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(0.011693439485246033,-0.999931629399233,0.999931629399233,0.011693439485246033,270.6511627906977,109)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M133.25,315 L156.31,372.15" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(-0.3742829223794759,-0.9273145604459574,0.9273145604459574,-0.3742829223794759,157.06181818181818,374)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
      <g class="connection-group">
        <g class="arrow-line">
          <path class="connection real" stroke-dasharray="" d="  M534.83,314 L519,370.08" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
          <g stroke="#000" transform="matrix(0.271776393576737,-0.9623604272279812,0.9623604272279812,0.271776393576737,518.4557823129252,372)" style="stroke: rgb(0, 0, 0); stroke-width: 1;">
            <path d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29" />
          </g>
        </g>
      </g>
    </g>
    <g>
      <g>
        <rect rx="0" ry="0" x="44" y="23" width="455" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="94" y="109" width="353" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="83" y="195" width="504" height="47" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="49" y="289" width="158" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="466" y="288" width="145" height="26" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="31" y="374" width="305" height="131" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
      <g>
        <rect rx="0" ry="0" x="339" y="372" width="316" height="152" style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;" />
      </g>
    </g>
    <g />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="660" height="546.328125" style="width:660px;height:546.328125px;font-family:Asana-Math, Asana;background:#FFF;">
    <g>
      <g>
        <g>
          <text x="48.328125" y="39.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">Objective: To determine the enthalpy changes of various reactions. </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="98.328125" y="125.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">Before we do so, we need to learn a few defintions. </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="87.328125" y="211.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">Now that we&#x27;ve learned these definitions, we can start finding the enthalpy </text>
        </g>
      </g>
      <g>
        <g>
          <text x="87.328125" y="232.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">changes of various reactions. </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="53.328125" y="305.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">Experimental methods</text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="470.328125" y="305.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">Theoretical methods</text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="35.328125" y="390.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">- Used to determine enthalpy change of </text>
        </g>
      </g>
      <g>
        <g>
          <text x="35.328125" y="411.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">combustion for various liquid (usually </text>
        </g>
      </g>
      <g>
        <g>
          <text x="35.328125" y="432.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">combustible liquid fuels)</text>
        </g>
      </g>
      <g></g>
      <g>
        <g>
          <text x="35.328125" y="474.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">- Used to determine enthalpy change when </text>
        </g>
      </g>
      <g>
        <g>
          <text x="35.328125" y="495.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">two liquids reacts (usually acids and bases). </text>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <text x="343.328125" y="388.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">Rely on Hess&#x27;s law. </text>
        </g>
      </g>
      <g></g>
      <g>
        <g>
          <text x="343.328125" y="430.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">- Enthalpy change of formation for compounds</text>
        </g>
      </g>
      <g>
        <g>
          <text x="343.328125" y="451.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">are used.</text>
        </g>
      </g>
      <g></g>
      <g>
        <g>
          <text x="343.328125" y="493.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">- Bond enthalpies are also used to calculate </text>
        </g>
      </g>
      <g>
        <g>
          <text x="343.328125" y="514.328125" style="white-space:pre;stroke:none;fill:rgb(0,0,0);fill-opacity:1;font-size:15px;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-style:normal;text-decoration:none solid rgb(0, 0, 0);">the enthalpy change accompying a reaction</text>
        </g>
      </g>
    </g>
  </svg>
</svg>
\end{filecontents}

\documentclass[12pt]{article}
\usepackage{svg}
\svgsetup{inkscapelatex=true}


\begin{document}
\begin{figure}
  \centering
  \includesvg{rearranged}
  \caption{Caption}
  \label{fig:my_label}
\end{figure}
\end{document}

Rearranged result

mrpiggi
  • 645
1

So, as I said in the comment "I would recommend You to make .pdf from Your .svg and use it instead. Reason: no pixelation also."

.svg to .pdf convertor

Temporary link to the project

Result: enter image description here

In addition

I copied your .svg code into file on my PC and here is the result, where the text also shifted. enter image description here (but when I to convert it,idk why, but everything looks fine)

WinnieNotThePooh
  • 3,008
  • 1
  • 7
  • 14
1

I was pointed to that question from here.

The issue is with the latex code inkscape generates. As a workaround, you can disable inkscapelatex locally or globally: includesvg[inkscapelatex=false]{your.svg} (see the svg package documentation).

Look at your svg inside inkscape: enter image description here

The box on the top-left corner gives the anchor. You can also see the text cursor above your text. The latex exporter isn't that smart, it will position the text according to the anchor. As it was said in another answer, dominant-baseline is ignored here.

Also, font size is likely to be slightly different (you can actually tune this by scaling the text (here by 0.87): \includesvg[width=\linewidth,inkscapelatex=true,pretex=\relscale{0.87}]{your.svg}.

To work around all this, I suggest removing dominant-baseline from your svg, and centering the text in the cells in a way that the exporter understands (to work around issue 1170):

  1. remove dominant-baseline. Search and replace from a text editor is probably your best friend here.
  2. In inkscape, use the "text" tool (press "T"), click a text zone and select center in the toolbar. This will change the anchor.
  3. Center the text in the boxes again.
  4. Save svg.

Observe the middle anchor:

enter image description here

Here is the edited svg (yes, it could be better aligned): 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="662" height="548.328125" style="
        width:662px;
        height:548.328125px;
        background: #FFF;
        fill: none;
">
  <svg xmlns="http://www.w3.org/2000/svg" />
  <svg xmlns="http://www.w3.org/2000/svg" class="role-diagram-draw-area">
    <g class="shapes-region" style="stroke: black; fill: none;">
      <g />
    </g>
    <g
       id="g68">
      <g
         class="connection-group"
         id="g16">
        <g
           class="arrow-line"
           id="g14">
          <path
             class="connection real"
             stroke-dasharray=""
             d="  M276.74,242 L162.08,288.25"
             style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
             id="path8" />
          <g
             stroke="#000"
             transform="matrix(0.9273798710151121,-0.3741210697568289,0.3741210697568289,0.9273798710151121,160.22754491017963,289)"
             style="stroke: rgb(0, 0, 0); stroke-width: 1;"
             id="g12">
            <path
               d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29"
               id="path10" />
          </g>
        </g>
      </g>
      <g
         class="connection-group"
         id="g26">
        <g
           class="arrow-line"
           id="g24">
          <path
             class="connection real"
             stroke-dasharray=""
             d="  M392.97,242 L504.58,287.25"
             style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
             id="path18" />
          <g
             stroke="#000"
             transform="matrix(-0.926725494419827,-0.3757390823328433,0.3757390823328433,-0.926725494419827,506.4333333333334,288)"
             style="stroke: rgb(0, 0, 0); stroke-width: 1;"
             id="g22">
            <path
               d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29"
               id="path20" />
          </g>
        </g>
      </g>
      <g
         class="connection-group"
         id="g36">
        <g
           class="arrow-line"
           id="g34">
          <path
             class="connection real"
             stroke-dasharray=""
             d="  M279.19,135 L318.18,193.34"
             style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
             id="path28" />
          <g
             stroke="#000"
             transform="matrix(-0.5557153433806965,-0.8313726343411085,0.8313726343411085,-0.5557153433806965,319.29274611398966,195.00000000000006)"
             style="stroke: rgb(0, 0, 0); stroke-width: 1;"
             id="g32">
            <path
               d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29"
               id="path30" />
          </g>
        </g>
      </g>
      <g
         class="connection-group"
         id="g46">
        <g
           class="arrow-line"
           id="g44">
          <path
             class="connection real"
             stroke-dasharray=""
             d="  M271.35,49 L270.67,107"
             style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
             id="path38" />
          <g
             stroke="#000"
             transform="matrix(0.011693439485246033,-0.999931629399233,0.999931629399233,0.011693439485246033,270.6511627906977,109)"
             style="stroke: rgb(0, 0, 0); stroke-width: 1;"
             id="g42">
            <path
               d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29"
               id="path40" />
          </g>
        </g>
      </g>
      <g
         class="connection-group"
         id="g56">
        <g
           class="arrow-line"
           id="g54">
          <path
             class="connection real"
             stroke-dasharray=""
             d="  M133.25,315 L156.31,372.15"
             style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
             id="path48" />
          <g
             stroke="#000"
             transform="matrix(-0.3742829223794759,-0.9273145604459574,0.9273145604459574,-0.3742829223794759,157.06181818181818,374)"
             style="stroke: rgb(0, 0, 0); stroke-width: 1;"
             id="g52">
            <path
               d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29"
               id="path50" />
          </g>
        </g>
      </g>
      <g
         class="connection-group"
         id="g66">
        <g
           class="arrow-line"
           id="g64">
          <path
             class="connection real"
             stroke-dasharray=""
             d="  M534.83,314 L519,370.08"
             style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
             id="path58" />
          <g
             stroke="#000"
             transform="matrix(0.271776393576737,-0.9623604272279812,0.9623604272279812,0.271776393576737,518.4557823129252,372)"
             style="stroke: rgb(0, 0, 0); stroke-width: 1;"
             id="g62">
            <path
               d=" M10.93,-3.29 Q4.96,-0.45 0,0 Q4.96,0.45 10.93,3.29"
               id="path60" />
          </g>
        </g>
      </g>
    </g>
    <g
       id="g98">
      <g
         id="g72">
        <rect
           rx="0"
           ry="0"
           x="44"
           y="23"
           width="455"
           height="26"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect70" />
      </g>
      <g
         id="g76">
        <rect
           rx="0"
           ry="0"
           x="94"
           y="109"
           width="353"
           height="26"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect74" />
      </g>
      <g
         id="g80">
        <rect
           rx="0"
           ry="0"
           x="83"
           y="195"
           width="504"
           height="47"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect78" />
      </g>
      <g
         id="g84">
        <rect
           rx="0"
           ry="0"
           x="49"
           y="289"
           width="158"
           height="26"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect82" />
      </g>
      <g
         id="g88">
        <rect
           rx="0"
           ry="0"
           x="466"
           y="288"
           width="145"
           height="26"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect86" />
      </g>
      <g
         id="g92">
        <rect
           rx="0"
           ry="0"
           x="31"
           y="374"
           width="305"
           height="131"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect90" />
      </g>
      <g
         id="g96">
        <rect
           rx="0"
           ry="0"
           x="339"
           y="372"
           width="316"
           height="152"
           style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: none; fill-opacity: 1;"
           id="rect94" />
      </g>
    </g>
    <g
       id="g100" />
  </svg>
  <svg
     width="660"
     height="546.328125"
     style="width:660px;height:546.328125px;font-family:Asana-Math, Asana;background:#FFF;"
     version="1.1"
     id="svg220">
    <g
       id="g110">
      <g
         id="g108">
        <g
           id="g106">
          <text
             x="269.21191"
             y="39.328125"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-anchor:middle;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text104">Objective: To determine the enthalpy changes of various reactions. </text>
        </g>
      </g>
    </g>
    <g
       id="g118">
      <g
         id="g116">
        <g
           id="g114">
          <text
             x="267.81787"
             y="127.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-anchor:middle;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text112">Before we do so, we need to learn a few defintions. </text>
        </g>
      </g>
    </g>
    <g
       id="g132"
       transform="translate(0,12)">
      <g
         id="g124">
        <g
           id="g122">
          <text
             x="87.328125"
             y="199.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text120">Now that we've learned these definitions, we can start finding the enthalpy </text>
        </g>
      </g>
      <g
         id="g130">
        <g
           id="g128">
          <text
             x="87.328125"
             y="220.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text126">changes of various reactions. </text>
        </g>
      </g>
    </g>
    <g
       id="g140"
       transform="translate(0,12)">
      <g
         id="g138">
        <g
           id="g136">
          <text
             x="127.06104"
             y="293.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none;text-anchor:middle;text-align:center"
             id="text134">Experimental methods</text>
        </g>
      </g>
    </g>
    <g
       id="g148">
      <g
         id="g146">
        <g
           id="g144">
          <text
             x="537.83911"
             y="306.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-anchor:middle;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text142">Theoretical methods</text>
        </g>
      </g>
    </g>
    <g
       id="g182"
       transform="translate(0,12)">
      <g
         id="g154">
        <g
           id="g152">
          <text
             x="35.328125"
             y="378.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text150">- Used to determine enthalpy change of </text>
        </g>
      </g>
      <g
         id="g160">
        <g
           id="g158">
          <text
             x="35.328125"
             y="399.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text156">combustion for various liquid (usually </text>
        </g>
      </g>
      <g
         id="g166">
        <g
           id="g164">
          <text
             x="35.328125"
             y="420.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text162">combustible liquid fuels)</text>
        </g>
      </g>
      <g
         id="g168" />
      <g
         id="g174">
        <g
           id="g172">
          <text
             x="35.328125"
             y="462.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text170">- Used to determine enthalpy change when </text>
        </g>
      </g>
      <g
         id="g180">
        <g
           id="g178">
          <text
             x="35.328125"
             y="483.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text176">two liquids reacts (usually acids and bases). </text>
        </g>
      </g>
    </g>
    <g
       id="g218"
       transform="translate(0,14)">
      <g
         id="g188">
        <g
           id="g186">
          <text
             x="343.32812"
             y="376.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text184">Rely on Hess's law. </text>
        </g>
      </g>
      <g
         id="g190" />
      <g
         id="g196">
        <g
           id="g194">
          <text
             x="343.32812"
             y="418.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text192">- Enthalpy change of formation for compounds</text>
        </g>
      </g>
      <g
         id="g202">
        <g
           id="g200">
          <text
             x="343.32812"
             y="439.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text198">are used.</text>
        </g>
      </g>
      <g
         id="g204" />
      <g
         id="g210">
        <g
           id="g208">
          <text
             x="343.32812"
             y="481.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text206">- Bond enthalpies are also used to calculate </text>
        </g>
      </g>
      <g
         id="g216">
        <g
           id="g214">
          <text
             x="343.32812"
             y="502.32812"
             style="font-style:normal;font-weight:400;font-size:15px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;white-space:pre;fill:#000000;fill-opacity:1;stroke:none"
             id="text212">the enthalpy change accompying a reaction</text>
        </g>
      </g>
    </g>
  </svg>
</svg>

Result:

Compiled result with new svg

Use tikz?

Another option for you would be to make this diagram with tikz, it would be pretty simple to do so: https://tikz.dev/gd

Here's an example with semi-manual positioning, not using the graph libraries:

\documentclass{standalone}

\usepackage{tikz}
\usetikzlibrary{positioning}


\begin{document}


\begin{tikzpicture}


\draw
 (0,0) node[draw] (Obj) {Objective etc.}
 +(0,-1) node[draw] (Before) {Before etc}
 (Before) +(0,-1) node[draw, below=of Before, text width=5cm, align=center] (Now) {Now that we've learned these definitions, we can start finding the enthalpy changes of various reactions. }
 (Now) +(0,-1) coordinate (center)
 node[draw, below left=of Now] (Exp) {Exp}
 node[draw, below right=of Now] (Th) {Theoretical}


node[draw, below=of Exp, text width=4cm] (Exptxt) {- Used to determine enthalpy change when two liquids reacts (usually acids and bases). }


node[draw, below=of Th, text width=4cm] (Thtxt) {Rely on Hess's law. \ - Enthalpy change of formation for compounds are used. \ - Bond enthalpies are also used to calculate the enthalpy change accompying a reaction}
;


\path[->]
 (Obj) edge (Before)
 (Before) edge (Now)
 (Now) edge (Exp)
 edge (Th)
 (Th) edge (Thtxt)
 (Exp) edge (Exptxt) 
;


\end{tikzpicture}


\end{document}

Compiled result with tikz

Benjamin Loison
  • 121
MayeulC
  • 111