Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Regression: No Vectorgraphics-output anymore #96

Open
JoKalliauer opened this issue Oct 17, 2022 · 4 comments
Open

Regression: No Vectorgraphics-output anymore #96

JoKalliauer opened this issue Oct 17, 2022 · 4 comments

Comments

@JoKalliauer
Copy link

JoKalliauer commented Oct 17, 2022 •
edited
Loading

In easyNWK 1.5 it was possible to export a Vectorgraphic as *.svg, I couldn't find this option easyNWK 2.0.2

SVG-example from easyNWK1.5:
easyNWK15
@alex-rind
Copy link
Collaborator

Thanks for suggesting a SVG export feature. easyNWK is a complete reimplementation and we still need to add some of the less prominent features. We will keep the SVG export in our roadmap.

@alex-rind
Copy link
Collaborator

n.b. in netflower we used https://www.npmjs.com/package/d3-save-svg for the SVG export

@alex-rind
Copy link
Collaborator

Pseudocode steps to export an SVG export:

  • take SVG element from DOM
  • (optionally) remove g.brushParent
  • insert
    <style type="text/css">
      <![CDATA[
      ]]>
    </style>
  • insert CSS part of the NetworkMap.vue component (TODO look for a way to avoid duplicate code)
  • download like saving a JSON file

The resulting SVG works with Chrome, Firefox and Gimp but not with Inkscape.

@JoKalliauer
Copy link
Author

@alex-rind :

Ich hab die Lösung nicht ganz verstanden, kenn' mich weder mit Document Object Model noch mit CSS aus.

Ich konnte das SVG im Quelltext finden:
2023-08-22

und hab das dann herauskopiert:

SVG-Quelltext 
<?xml version="1.0" encoding="UTF-8"?>
<svg id="nwkmap" viewBox="-106,-106,212,212" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="square" viewBox="-1.5,-1.5,3,3">
    <path d="m-.89-.89h1.77v1.77h-1.77z"/>
  </symbol>
  <symbol id="circle" viewBox="-1.5,-1.5,3,3">
    <circle r="1"/>
  </symbol>
  <symbol id="triangle" viewBox="-1.5,-1.5,3,3">
    <path d="m-1.347.778h2.694l-1.347-2.333z"/>
  </symbol>
  <symbol id="pentagram" viewBox="-1.5,-1.5,3,3">
    <path d="m-.67565.93h1.3513l.41755-1.28517-1.0932-.79433-1.0932.79433z"/>
  </symbol>
  <symbol id="star" viewBox="-1.5,-1.5,3,3">
    <path d="m.69236 1.05431-.6889-.35897-.68626.36399.12852-.76611-.55825-.54019.76833-.11451.34124-.69785.34634.69534.76915.10889-.55428.54426z"/>
  </symbol>
  <filter id="dilate-and-xor">
    <feMorphology in="SourceGraphic" operator="dilate" radius="0.35" result="dilate-result"/>
    <feComposite in="SourceGraphic" in2="dilate-result" operator="xor" result="xor-result"/>
  </filter>
  <g id="coords-min">
    <path d="m0-100v202" vector-effect="non-scaling-stroke"/>
    <path d="m102 0h-204" vector-effect="non-scaling-stroke"/>
  </g>
  <g id="sectors">
    <text text-anchor="end" x="100" y="-100">Familie</text>
    <text x="-100" y="-100">Freund*innen / Bekannte</text>
    <text x="-100" y="100">Kolleg*innen</text>
    <text text-anchor="end" x="100" y="100">prof. Helfer*innen</text>
  </g>
  <text text-anchor="middle"><tspan x="0" y="-1em">Klicke in die Karte, um</tspan><tspan dy="2em" x="0">die Position festzulegen</tspan></text>
  <g id="marksBackgroundLayer">
    <g>
      <path d="m24.11-13.95-79.44-36.7"/>
      <path d="m24.11-13.95-5.09 8.78"/>
      <path d="m24.11-13.95 10.67-56.33"/>
      <path d="m7.93-61.05 26.85-9.23"/>
      <path d="m7.93-61.05 16.18 47.1"/>
    </g>
    <g>
      <text dx="3" dy="-1" x="35.23" y="-96.79" vector-effect="non-scaling-stroke">+Hubert</text>
      <text dx="3" dy="-1" x="35.23" y="-96.79">+Hubert</text>
    </g>
    <g>
      <path d="m0 0 59.09 72.77"/>
      <text dx="3" dy="4" x="59.09" y="72.77" vector-effect="non-scaling-stroke">Dr. Maier</text>
      <text dx="3" dy="4" x="59.09" y="72.77">Dr. Maier</text>
    </g>
    <g>
      <text dx="3" dy="-1" x="34.78" y="-70.28" vector-effect="non-scaling-stroke">Josefine / 86</text>
      <text dx="3" dy="-1" x="34.78" y="-70.28">Josefine / 86</text>
    </g>
    <g>
      <path d="m0 0-55.33-50.65" filter="url(#dilate-and-xor)"/>
      <text dx="-3" dy="-1" text-anchor="end" x="-55.33" y="-50.65" vector-effect="non-scaling-stroke">Lara / 34</text>
      <text dx="-3" dy="-1" text-anchor="end" x="-55.33" y="-50.65">Lara / 34</text>
    </g>
    <g>
      <path d="m0 0-30.24 65.24"/>
      <text dx="-3" dy="4" text-anchor="end" x="-30.24" y="65.24" vector-effect="non-scaling-stroke">Max</text>
      <text dx="-3" dy="4" text-anchor="end" x="-30.24" y="65.24">Max</text>
    </g>
    <g>
      <path d="m0 0 7.93-61.05"/>
      <text dx="3" dy="-1" x="7.93" y="-61.05" vector-effect="non-scaling-stroke">Ewald</text>
      <text dx="3" dy="-1" x="7.93" y="-61.05">Ewald</text>
    </g>
    <g>
      <text dx="3" dy="-1" x="41.92" y="-27.14" vector-effect="non-scaling-stroke">Strolchi</text>
      <text dx="3" dy="-1" x="41.92" y="-27.14">Strolchi</text>
    </g>
    <g>
      <path d="m0 0-27.82 31.88"/>
      <text dx="-3" dy="4" text-anchor="end" x="-27.82" y="31.88" vector-effect="non-scaling-stroke">Susi / 27</text>
      <text dx="-3" dy="4" text-anchor="end" x="-27.82" y="31.88">Susi / 27</text>
    </g>
    <g>
      <path d="m0 0 24.11-13.95"/>
      <text dx="3" dy="-1" x="24.11" y="-13.95" vector-effect="non-scaling-stroke">Maria</text>
      <text dx="3" dy="-1" x="24.11" y="-13.95">Maria</text>
    </g>
    <g>
      <path d="m0 0 19.02-5.17"/>
      <text dx="3" dy="-1" x="19.02" y="-5.17" vector-effect="non-scaling-stroke">Richard</text>
      <text dx="3" dy="-1" x="19.02" y="-5.17">Richard</text>
    </g>
    <use id="ego" height="4" transform="translate(-2 -2)" width="4" xlink:href="#circle" xmlns:xlink="http://www.w3.org/1999/xlink"/>
  </g>
  <g>
    <use height="4" transform="translate(-2 -2)" width="4" x="35.23" xlink:href="#square" xmlns:xlink="http://www.w3.org/1999/xlink" y="-96.79"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="59.09" xlink:href="#pentagram" xmlns:xlink="http://www.w3.org/1999/xlink" y="72.77"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="34.78" xlink:href="#circle" xmlns:xlink="http://www.w3.org/1999/xlink" y="-70.28"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="-55.33" xlink:href="#triangle" xmlns:xlink="http://www.w3.org/1999/xlink" y="-50.65"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="-30.24" xlink:href="#pentagram" xmlns:xlink="http://www.w3.org/1999/xlink" y="65.24"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="7.93" xlink:href="#pentagram" xmlns:xlink="http://www.w3.org/1999/xlink" y="-61.05"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="41.92" xlink:href="#star" xmlns:xlink="http://www.w3.org/1999/xlink" y="-27.14"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="-27.82" xlink:href="#circle" xmlns:xlink="http://www.w3.org/1999/xlink" y="31.88"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="24.11" xlink:href="#circle" xmlns:xlink="http://www.w3.org/1999/xlink" y="-13.95"/>
    <use height="4" transform="translate(-2 -2)" width="4" x="19.02" xlink:href="#square" xmlns:xlink="http://www.w3.org/1999/xlink" y="-5.17"/>
  </g>
  <path id="position" d="m-110-110h220v220h-220z" fill="none"/>
  <text text-anchor="middle" y="-102">Rosa Braunsteigl-Müller (45a)</text>
</svg>

Was viel einfacher geht ist, wenn man es einfach als PDF speichert und in Inkscape das PDF öffnet und als SVG speichert.

PDF2SVG (72kB) optimized SVG (5kB)
easyNWK_fromPDF easyNWK_simplified
______________________________________________________________ ______________________________________________________________

Ich hab das SVG optimiert und der Doppelstrich habe ich mit einem Vektor-strich ersetzt. (ein grauer Strich mit Stärke 3 und darüber ein weißer Strich mit Stärke 1), wäre schön, wenn man das Softwareseitig machen würde.

grafik

optimized SVG nach PDF-import 
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 524 456" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <clipPath id="a">
  <path d="m365 104.07h7v7.93h-7z"/>
 </clipPath>
 <clipPath id="b">
  <path d="m182.25 143.67h7.75v6.328h-7.75z"/>
 </clipPath>
 <clipPath id="c">
  <path d="m343 218h7v7.875h-7z"/>
 </clipPath>
 <path d="m463.89 214c0 111.5-90.385 201.89-201.89 201.89-111.51 0-201.89-90.385-201.89-201.89 0-111.51 90.385-201.89 201.89-201.89 111.51 0 201.89 90.385 201.89 201.89z" fill="#c7e9c0"/>
 <path d="m396.6 214c0 74.336-60.262 134.6-134.6 134.6-74.337 0-134.6-60.262-134.6-134.6 0-74.337 60.262-134.6 134.6-134.6 74.337 0 134.6 60.262 134.6 134.6z" fill="#fff" fill-opacity=".5"/>
 <path d="m329.29 214c0 37.164-30.125 67.289-67.289 67.289s-67.289-30.125-67.289-67.289 30.125-67.289 67.289-67.289 67.289 30.125 67.289 67.289z" fill="#fff" fill-opacity=".5"/>
 <g fill="none">
  <g>
   <path d="m262 2.02v423.96m211.98-211.98h-423.96" stroke="#fff" stroke-width="4"/>
   <path d="m310.67 185.84-160.38-74.102m160.38 74.102-10.274 17.73m10.274-17.73 21.555-113.72m-54.205 18.633 54.211-18.637m-54.211 18.637 32.656 95.088m-48.676 28.159 119.29 146.9" stroke="#afafaf" stroke-width="1."/>
  </g>
  <path d="m150.29 111.74 111.71 102.26" stroke="#afafaf" stroke-width="3"/>
  <path d="m150.29 111.74 111.71 102.26" stroke="#fff"/>
  <path d="m262 214-61.047 131.7m61.047-131.7 16.016-123.25m-16.016 123.25-56.164 64.367m56.164-64.367 48.672-28.16m-48.672 28.16 38.398-10.43" stroke="#afafaf" stroke-width="1"/>
 </g>
 <path d="m264.69 214c0 1.488-1.203 2.691-2.691 2.691s-2.691-1.203-2.691-2.691 1.203-2.691 2.691-2.691 2.691 1.203 2.691 2.691z" fill="#ff8900"/>
 <path d="m264.69 214c0 1.488-1.203 2.691-2.691 2.691s-2.691-1.203-2.691-2.691 1.203-2.691 2.691-2.691 2.691 1.203 2.691 2.691" fill="none" stroke="#fff" stroke-width=".54"/>
 <g fill="#363636">
  <path d="m330.71 16.188h4.77v4.77h-4.77zm48.75 347.19h3.641l1.121-3.457-2.942-2.141-2.941 2.141z" stroke="#fff" stroke-width=".54"/>
  <path d="m334.91 72.1c0 1.489-1.203 2.696-2.691 2.696-1.489 0-2.692-1.207-2.692-2.696 0-1.484 1.203-2.691 2.692-2.691 1.488 0 2.691 1.207 2.691 2.691z"/>
 </g>
 <path d="m334.91 72.1c0 1.489-1.203 2.696-2.691 2.696-1.489 0-2.692-1.207-2.692-2.696 0-1.484 1.203-2.691 2.692-2.691 1.488 0 2.691 1.207 2.691 2.691" clip-path="url(#a)" fill="none" stroke="#fff" stroke-width=".54"/>
 <g fill="#363636">
  <g stroke="#fff" stroke-width=".54">
   <path transform="translate(-36 -36)" d="m182.66 149.8h7.25l-3.625-6.282z" clip-path="url(#b)"/>
   <path d="m199.11 348.2h3.637l1.125-3.457-2.941-2.14-2.942 2.14zm77.05-254.949h3.637l1.125-3.457-2.942-2.141-2.945 2.141zm72.33 68.779-1.855-.968-1.848.98.348-2.062-1.504-1.454 2.07-.308.918-1.879.93 1.871 2.07.293-1.492 1.465z"/>
  </g>
  <path d="m208.5 278.34c0 1.484-1.207 2.691-2.691 2.691-1.489 0-2.692-1.207-2.692-2.691 0-1.488 1.203-2.691 2.692-2.691 1.484 0 2.691 1.203 2.691 2.691z"/>
 </g>
 <path d="m208.5 278.34c0 1.484-1.207 2.691-2.691 2.691-1.489 0-2.692-1.207-2.692-2.691 0-1.488 1.203-2.691 2.692-2.691 1.484 0 2.691 1.203 2.691 2.691" fill="none" stroke="#fff" stroke-width=".54"/>
 <path d="m313.35 185.84c0 1.488-1.207 2.691-2.692 2.691-1.488 0-2.695-1.203-2.695-2.691 0-1.484 1.207-2.691 2.695-2.691 1.485 0 2.692 1.207 2.692 2.691z" fill="#363636"/>
 <g stroke="#fff">
  <path d="m313.35 185.84c0 1.488-1.207 2.691-2.692 2.691-1.488 0-2.695-1.203-2.695-2.691 0-1.484 1.207-2.691 2.695-2.691 1.485 0 2.692 1.207 2.692 2.691" clip-path="url(#c)" fill="none" stroke-width=".54"/>
  <path d="m298.01 201.18h4.77v4.77h-4.77z" fill="#363636" stroke-width=".54"/>
  <use stroke-width="3" xlink:href="#d" xmlns:xlink="http://www.w3.org/1999/xlink"/>
 </g>
 <g id="d" font-family="Segoe UI,Tahoma,Liberation Sans,Arial" font-size="8.07">
  <text fill="#808080" font-weight="700"><tspan x="60.13" y="12.11">Freund*innen / Bekannte</tspan><tspan x="60.13" y="415.89">Kolleg*innen</tspan></text>
  <text fill="#808080" font-weight="700" text-anchor="end"><tspan x="465" y="12.11" text-anchor="end">Familie</tspan> <tspan x="465" y="415.89" text-anchor="end">prof. Helfer*innen</tspan></text>
  <text x="339.19" y="16.58">+Hubert</text>
  <text x="387.36" y="368.99">Dr. Maier</text>
  <text x="338.29" y="70.11">Josefine / 86</text>
  <text x="113.24" y="109.72">Lara / 34</text>
  <text x="180.4" y="353.79">Max</text>
  <text x="284.08" y="88.74">Ewald</text>
  <text x="352.69" y="157.2">Strolchi</text>
  <text x="169.29" y="286.45">Susi / 27</text>
  <text x="316.74" y="183.82">Maria</text>
  <text x="306.47" y="201.56">Richard</text>
  <text x="262" y="8.08" font-style="italic" text-anchor="middle">Rosa Braunsteigl-Müller (45a)</text>
 </g>
</svg>

mit dem Vektor-PDF-output (mit wenigen Raster-elementen) sehe ich meine Vektor-grafik-Anfrage als abgeschlossen, auch wenn ich mir wünschen würde, wenn die Rastergrafiken noch ganz aus dem Output verschwinden.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alex-rind @JoKalliauer