Discussion:
[Inkscape-user] Awk SVG insertion scripts
Steve Litt
2017-04-29 05:42:07 UTC
Permalink
Hi everyone,

My experimentation tells me that life's much easier if I put the <svg/>
element and all it contains in my HTML file, rather than trying to
import it with <img/> or <object/>. So I made the following scripts to
put the <svg> part of a (presumably Inkscape created) SVG file into an
HTML file wherever the following is located:

<div class="token">myfile.svg</div>

Be sure to use doublequotes around "token": These are simple scripts.

Script 1: insertsvg.awk myfile.html

Script 2: justsvg.awk mysvg.svg

Let's say these two Awk files were executable and on the path. In your
myfile.html, place the following line (alone on its line) where you
want the <svg/> element to be inserted:

<div class="token">mysvg.svg</div>

Now, assuming myfile.html and mysvg.svg are both in the current
directory, just do the following:

./insertsvg.svg myfile.html > myfile_complete.html

Now myfile_complete.html no longer has the div.token, but in its place
has the entire <svg/> element from mysvg.svg.

This means when you include your Inkscape built SVGs in HTML files,
theres an easy automated way to do it without having to resort to cut
and paste.

And now for the scripts:

/* ======= insertsvg.awk ==============*/
#!/usr/bin/gawk -We

{printthisline = 1}
/<div\s\s*class="token"\s*>\s*[^<]*\s*<\/div>/{
printthisline = 0
svgfile = \
gensub(/\s*<div\s\s*class="token"\s*>\s*([^<]*)\s*<\/div>\s*/, \
"\\1", "1")
system("./justsvg.awk " svgfile)
}
printthisline == 1 {print}


/* ======= justsvg.awk ==============*/
#!/usr/bin/gawk -We

BEGIN {insvg = 0}

/\s*<svg/ { insvg = 1 }

insvg == 1 { print }

/\s*<\/svg\s*>/ { insvg = 0; exit 0 }


HTH,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
Martin Owens
2017-04-29 06:41:11 UTC
Permalink
Steve,

I'm attaching a dynamic loader that I just knocked up. direct
javascript (no jquery or other deps) loads in an svg file specified in
a div tag "data-svg" much like an image tag would.

https://inkscape.org/en/~doctormo/%E2%98%85insert-svg-into-html-like-an
-img-tag

Should make it easier to construct at least browser based html. Your
solution is better for html documents that aren't viewed in a browser
(For example being turned into pdfs)

Best Regards, Martin Owens
Post by Steve Litt
Hi everyone,
My experimentation tells me that life's much easier if I put the <svg/>
element and all it contains in my HTML file, rather than trying to
import it with <img/> or <object/>. So I made the following scripts to
put the <svg> part of a (presumably Inkscape created) SVG file into an
<div class="token">myfile.svg</div>
Be sure to use doublequotes around "token": These are simple scripts.
Script 1: insertsvg.awk myfile.html
Script 2: justsvg.awk mysvg.svg
Let's say these two Awk files were executable and on the path. In your
myfile.html, place the following line (alone on its line) where you
<div class="token">mysvg.svg</div>
Now, assuming myfile.html and mysvg.svg are both in the current
./insertsvg.svg myfile.html > myfile_complete.html
Now myfile_complete.html no longer has the div.token, but in its place
has the entire <svg/> element from mysvg.svg.
This means when you include your Inkscape built SVGs in HTML files,
theres an easy automated way to do it without having to resort to cut
and paste.
/* ======= insertsvg.awk ==============*/
#!/usr/bin/gawk -We
{printthisline = 1}
/<div\s\s*class="token"\s*>\s*[^<]*\s*<\/div>/{
  printthisline = 0
  svgfile = \
   gensub(/\s*<div\s\s*class="token"\s*>\s*([^<]*)\s*<\/div>\s*/, \
   "\\1", "1") 
  system("./justsvg.awk " svgfile)
}
printthisline == 1 {print}
/* ======= justsvg.awk ==============*/
#!/usr/bin/gawk -We
BEGIN {insvg = 0}
/\s*<svg/ { insvg = 1 }
insvg == 1 { print }
/\s*<\/svg\s*>/ { insvg = 0; exit 0 }
HTH,
 
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Shlomi Fish
2017-04-29 09:26:03 UTC
Permalink
Hi Martin!

On Sat, 29 Apr 2017 02:41:11 -0400
Post by Martin Owens
Steve,
I'm attaching a dynamic loader that I just knocked up. direct
javascript (no jquery or other deps) loads in an svg file specified in
a div tag "data-svg" much like an image tag would.
https://inkscape.org/en/~doctormo/%E2%98%85insert-svg-into-html-like-an
-img-tag
Unfortunately:

1. Your email did not contain any attachments.

2. Your link was split into two lines - making it harder to follow.

Regards,

Shlomi Fish
Post by Martin Owens
Should make it easier to construct at least browser based html. Your
solution is better for html documents that aren't viewed in a browser
(For example being turned into pdfs)
Best Regards, Martin Owens
--
-----------------------------------------------------------------
Shlomi Fish http://www.shlomifish.org/
http://www.shlomifish.org/humour/bits/facts/Summer-Glau/

It is a good idea to stop worrying about problems (or “problems” in quotes)
that cannot be fixed.

Please reply to list if it's a mailing list post - http://shlom.in/reply .
Martin Owens
2017-04-29 15:20:05 UTC
Permalink
Post by Shlomi Fish
1. Your email did not contain any attachments.
2. Your link was split into two lines - making it harder to follow.
Some assembly required.

Martin,
Steve Litt
2017-04-29 17:24:16 UTC
Permalink
On Sat, 29 Apr 2017 02:41:11 -0400
Post by Martin Owens
Steve,
I'm attaching a dynamic loader that I just knocked up. direct
javascript (no jquery or other deps) loads in an svg file specified in
a div tag "data-svg" much like an image tag would.
https://inkscape.org/en/~doctormo/%E2%98%85insert-svg-into-html-like-an
-img-tag
Nice Martin!

Do you by any chance have any back end web apps hanging around that
basically receive the ID of the clicked object, do some data
processing, and send some simple JSON back so the front end can update
itself based on the JSON?

Or anything like that? Basically, the logic concerning my clickable map
is just a little too complex to put entirely in the front end.

Thanks,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
Martin Owens
2017-04-29 17:33:34 UTC
Permalink
Hi Steve,

Backends can be many things. I work on this genetics project (AGPLv3)
which uses d3/svg and does all sorts of things:

Code: https://github.com/IQSS/gentb-site
Live: https://gentb.hms.harvard.edu/maps/

It's django/python that does the json handling, and django does make it
easy to construct json responses. But it's a complex process here, so
not a clean example.

Best Regards, Martin Owens
Post by Shlomi Fish
On Sat, 29 Apr 2017 02:41:11 -0400
Post by Martin Owens
Steve,
I'm attaching a dynamic loader that I just knocked up. direct
javascript (no jquery or other deps) loads in an svg file specified in
a div tag "data-svg" much like an image tag would.
https://inkscape.org/en/~doctormo/%E2%98%85insert-svg-into-html-lik
e-an
-img-tag
Nice Martin!
Do you by any chance have any back end web apps hanging around that
basically receive the ID of the clicked object, do some data
processing, and send some simple JSON back so the front end can update
itself based on the JSON?
Or anything like that? Basically, the logic concerning my clickable map
is just a little too complex to put entirely in the front end.
Thanks,
 
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Steve Litt
2017-04-30 17:42:08 UTC
Permalink
Maaaaaaaaaan...

That's some slick Javascript Martin.

Later tomorrow I'll see whether it works with file:///whatever as well
as http://whatever, which is the big problem I was having with
<object/>. I'm also going to see whether yours reveals the .svg in the
browser's code: I'd kind of like it if it didn't.

StevET


On Sat, 29 Apr 2017 02:41:11 -0400
Post by Martin Owens
Steve,
I'm attaching a dynamic loader that I just knocked up. direct
javascript (no jquery or other deps) loads in an svg file specified in
a div tag "data-svg" much like an image tag would.
https://inkscape.org/en/~doctormo/%E2%98%85insert-svg-into-html-like-an
-img-tag
Should make it easier to construct at least browser based html. Your
solution is better for html documents that aren't viewed in a browser
(For example being turned into pdfs)
Best Regards, Martin Owens
Post by Steve Litt
Hi everyone,
My experimentation tells me that life's much easier if I put the <svg/>
element and all it contains in my HTML file, rather than trying to
import it with <img/> or <object/>. So I made the following scripts to
put the <svg> part of a (presumably Inkscape created) SVG file into an
<div class="token">myfile.svg</div>
Be sure to use doublequotes around "token": These are simple
scripts.
Script 1: insertsvg.awk myfile.html
Script 2: justsvg.awk mysvg.svg
Let's say these two Awk files were executable and on the path. In your
myfile.html, place the following line (alone on its line) where you
<div class="token">mysvg.svg</div>
Now, assuming myfile.html and mysvg.svg are both in the current
./insertsvg.svg myfile.html > myfile_complete.html
Now myfile_complete.html no longer has the div.token, but in its place
has the entire <svg/> element from mysvg.svg.
This means when you include your Inkscape built SVGs in HTML files,
theres an easy automated way to do it without having to resort to
cut and paste.
/* ======= insertsvg.awk ==============*/
#!/usr/bin/gawk -We
{printthisline = 1}
/<div\s\s*class="token"\s*>\s*[^<]*\s*<\/div>/{
  printthisline = 0
  svgfile = \
   gensub(/\s*<div\s\s*class="token"\s*>\s*([^<]*)\s*<\/div>\s*/, \
   "\\1", "1") 
  system("./justsvg.awk " svgfile)
}
printthisline == 1 {print}
/* ======= justsvg.awk ==============*/
#!/usr/bin/gawk -We
BEGIN {insvg = 0}
/\s*<svg/ { insvg = 1 }
insvg == 1 { print }
/\s*<\/svg\s*>/ { insvg = 0; exit 0 }
HTH,
 
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Loading...