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
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
On Sat, 2017-04-29 at 01:42 -0400, Steve Litt wrote:
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
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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
Hi Martin!
On Sat, 29 Apr 2017 02:41:11 -0400 Martin Owens <doctormo@...155...> wrote:
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
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
On Sat, 29 Apr 2017 02:41:11 -0400 Martin Owens <doctormo@...155...> wrote:
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
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
On Sat, 2017-04-29 at 13:24 -0400, Steve Litt wrote:
On Sat, 29 Apr 2017 02:41:11 -0400 Martin Owens <doctormo@...155...> wrote:
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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
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 Martin Owens <doctormo@...155...> wrote:
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
On Sat, 2017-04-29 at 01:42 -0400, Steve Litt wrote:
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
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 Inkscape-user@lists.sourceforge.net 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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
participants (3)
-
Martin Owens -
Shlomi Fish -
Steve Litt