8

problem

  1. I drew a line segment using the line/Bézier curve tool.
  2. I used "color and boundary" to change its boundary color.
  3. I also set the arrow style.
  4. I saved it as SVG.
  5. I opened it on Google Chrome.

Error observed: The arrow tip color is black instead of colored.

Question: What should be done so that the arrow tip and tail have the same color in my web browser?

Software used:
Google Chrome Version 104.0.5112.102 (Official Build) (64 bits)
Inkscape 1.2.1 (9c6d41e410, 2022-07-14)

GLib version:     2.72.2
GTK version:      3.24.34
glibmm version:   2.66.4
gtkmm version:    3.24.6
libxml2 version:  2.9.14
libxslt version:  1.1.35
Cairo version:    1.17.6
Pango version:    1.50.7
HarfBuzz version: 4.4.1

OS version:       Windows 10 21H1

SVG picture used:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
   sodipodi:docname="220426-parallel.svg"
   inkscape:export-filename="C:\Users\sere\Pictures\220426-parallel.png"
   inkscape:export-xdpi="96"
   inkscape:export-ydpi="96"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:cc="http://creativecommons.org/ns#">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="1"
     inkscape:pagecheckerboard="false"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="0.74653479"
     inkscape:cx="397.16836"
     inkscape:cy="561.9296"
     inkscape:window-width="1920"
     inkscape:window-height="1001"
     inkscape:window-x="-9"
     inkscape:window-y="-9"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2">
    <marker
       style="overflow:visible;"
       id="marker70797"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Arrow1Mend"
       inkscape:isstock="true">
      <path
         transform="scale(0.4) rotate(180) translate(10,0)"
         style="fill-rule:evenodd;fill:context-stroke;stroke:context-stroke;stroke-width:1.0pt;"
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
         id="path70795" />
    </marker>
    <marker
       style="overflow:visible"
       id="Tail"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Tail"
       inkscape:isstock="true">
      <g
         transform="scale(-1.2)"
         id="g4807">
        <path
           style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.8;stroke-linecap:round"
           d="M -3.8048674,-3.9585227 L 0.54352094,0"
           id="path4795" />
        <path
           style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.8;stroke-linecap:round"
           d="M -1.2866832,-3.9585227 L 3.0617053,0"
           id="path4797" />
        <path
           style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.8;stroke-linecap:round"
           d="M 1.3053582,-3.9585227 L 5.6537466,0"
           id="path4799" />
        <path
           style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.8;stroke-linecap:round"
           d="M -3.8048674,4.1775838 L 0.54352094,0.21974226"
           id="path4801" />
        <path
           style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.8;stroke-linecap:round"
           d="M -1.2866832,4.1775838 L 3.0617053,0.21974226"
           id="path4803" />
        <path
           style="fill:none;fill-rule:evenodd;stroke:context-stroke;stroke-width:0.8;stroke-linecap:round"
           d="M 1.3053582,4.1775838 L 5.6537466,0.21974226"
           id="path4805" />
      </g>
    </marker>
    <marker
       style="overflow:visible;"
       id="Arrow1Mend"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Arrow1Mend"
       inkscape:isstock="true">
      <path
         transform="scale(0.4) rotate(180) translate(10,0)"
         style="fill-rule:evenodd;fill:context-stroke;stroke:context-stroke;stroke-width:1.0pt;"
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
         id="path4768" />
    </marker>
    <marker
       style="overflow:visible;"
       id="Arrow1Lend"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Arrow1Lend"
       inkscape:isstock="true">
      <path
         transform="scale(0.8) rotate(180) translate(12.5,0)"
         style="fill-rule:evenodd;fill:context-stroke;stroke:context-stroke;stroke-width:1.0pt;"
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
         id="path4762" />
    </marker>
  </defs>
  <g
     inkscape:label="Calque 1"
     inkscape:groupmode="layer"
     id="layer1">
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
       x="21.619331"
       y="43.238667"
       id="text1353"><tspan
         sodipodi:role="line"
         id="tspan1351"
         style="stroke-width:0.264583"
         x="21.619331"
         y="43.238667"><tspan
   style="fill:#ff0000"
   id="tspan14567">a</tspan> // <tspan
   style="fill:#0000ff"
   id="tspan10935">b</tspan> implies <tspan
   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'"
   id="tspan42097">there exists</tspan> some</tspan><tspan
         sodipodi:role="line"
         style="stroke-width:0.264583"
         x="21.619331"
         y="56.467793"
         id="tspan19133">constant k such that <tspan
   style="fill:#ff0000"
   id="tspan21331">a</tspan> = k<tspan
   style="fill:#0000ff"
   id="tspan23487">b</tspan></tspan></text>
    <path
       style="fill:none;stroke:#ff0000;stroke-width:0.873125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
       d="M 18.784009,117.66587 126.88067,101.00835"
       id="path3844" />
    <path
       style="fill:none;stroke:#0000ff;stroke-width:0.873125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend);marker-mid:"
       d="M 28.693035,95.378504 113.05031,82.379184"
       id="path16338" />
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
       x="21.619331"
       y="154.36331"
       id="text23911"><tspan
         sodipodi:role="line"
         style="stroke-width:0.264583"
         x="21.619331"
         y="154.36331"
         id="tspan24769"><tspan
   style="fill:#ff0000"
   id="tspan23899">a</tspan> not parallel to <tspan
   style="fill:#0000ff"
   id="tspan23901">b</tspan> implies <tspan
   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold'"
   id="tspan45693">for all</tspan></tspan><tspan
         sodipodi:role="line"
         style="stroke-width:0.264583"
         x="21.619331"
         y="167.59244"
         id="tspan69195">constant k, <tspan
   style="fill:#ff0000"
   id="tspan23905">a</tspan> != k<tspan
   style="fill:#0000ff"
   id="tspan23907">b</tspan></tspan></text>
    <path
       style="fill:none;stroke:#ff0000;stroke-width:0.873125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
       d="M 46.558946,255.34819 154.65566,238.69067"
       id="path70805" />
    <path
       style="fill:none;stroke:#0000ff;stroke-width:0.873125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
       d="m 60.936548,186.35114 76.061302,38.72753"
       id="path70807" />
  </g>
  <metadata
     id="metadata72093">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <cc:license
           rdf:resource="http://creativecommons.org/licenses/by/4.0/" />
      </cc:Work>
      <cc:License
         rdf:about="http://creativecommons.org/licenses/by/4.0/">
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Reproduction" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Distribution" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#Notice" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#Attribution" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
      </cc:License>
    </rdf:RDF>
  </metadata>
</svg>
Improve this question
1
  • I have updated my answer to use a more convenient workaround.
    – s.ouchene
    Commented Nov 9, 2022 at 17:08

2 Answers 2

Reset to default
9

Update:

Because the browsers still do not support all SVG2 features, there is a better workaround in Inkscape to fix that issue:

  • Select Edit > Preferences.

  • From the tree on the left, select: Input/Output > SVG export

  • Under "SVG 2 to SVG 1.1" check the two checkboxes to use the correct direction and colors (as shown in the screenshot below).

Check the two checkboxes to correctly render direction and colors

  • Now save the SVG file as follows:

    • File > Save as.
    • Check the box: "Export as SVG 1.1 per settings in Preferences dialog"

  • Now the markers should be rendered correctly in the browsers.

enter image description here

Note for Windows users:

For Windows users, you need an extra step in order to enable the "Export as SVG 1.1 per settings in Preferences dialog" option. To enable it:

  • Select: Edit > Preferences.
  • From the tree view select: Interface > Windows.
  • Under "Desktop integration" enable the option "GTK open/save dialogs", as shown in the screenshot below:

Desktop integration

Old answer (but still relevant)

This is a known issue (see here). A workaround is to use the following extension to color the markers:

Extensions > Modify Path > Color Markers…

Improve this answer
3

Inkscape is using context-stroke. You can see the path's style within the markers contains this...

fill:context-stroke;stroke:context-stroke

context-stroke is a new feature of SVG 2, it does not exist in the SVG 1.1 specification. Unfortunately no browser has yet implemented this part of the SVG 2 specification. Chrome's bugtracker tracks it here and Firefox tracks it here

If you want compatibility with browsers you'll need to have one marker for each colour you want to use.

For Inkscape, the release notes say

Stock markers use SVG 2.0 context-stroke to automatically take on the stroke color of the object (MR #2009). If SVG 1.1 compatibility is needed, the setting for marker colors in Edit -> Preferences -> Input/Output -> SVG export can be activated and SVG 1.1 compatibility can be activated in the 'Save as' dialog.

Improve this answer
6
  • Do you mean there should be an option, but there isn't?
    – Billy Kerr
    Commented Sep 3, 2022 at 16:39
  • Well, I can tell you there is no such option, at least not in the Export or Save as dialogs. Best bet is to use the workaround that @s.ouchene suggests.
    – Billy Kerr
    Commented Sep 3, 2022 at 17:10
  • @BillyKerr I've updated my answer to link to Inkscape's release notes and added a quote directly from those release notes explaining what to do.
    – Robert Longson
    Commented Sep 3, 2022 at 18:49
  • @RobertLongston - yeah I'm aware of that, but it seems to be broken in Inkscape 1.2.1 - just makes no difference, and there's nothing in the current 1.2.1 save as dialog. Probably a bug.
    – Billy Kerr
    Commented Sep 3, 2022 at 19:08
  • 1
    It's rather unfortunate if Inkscape can't now output browser compatible SVG. It does have a bugtracker though: inkscape.org/contribute/report-bugs
    – Robert Longson
    Commented Sep 3, 2022 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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