LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 12-03-2022, 06:41 AM   #1
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
[SVG/HTML] Scrolling referenced SVG – Not inline SVG


Good ... afternoon (darn, it is late)

Can you think of a better way to render a referenced SVG-file in HTML scrollable ?

The only working solution for me is inline SVG, which means that the XML-code of the SVG image must be copied into the page, preferably as the child to a block-tag (e.g. <div/>).

As I have many pages with always 1 SVG image (making up almost the whole page), I can automate the creation of the page with a script and a template HTML-file (preferable) or with a javascript replacement for actual HTML-code (not good).

What I would have preferred, is no inline-SVG at all, but an <object/> tag. Unfortunately, when I dynamically set the height for the container-tag according to the screen and have already set the overflow style (auto or scroll), upon page-load, the scrollbar appears for only a moment, then disappears (a fixed height in the style of the container has the same effect).

For me, the object tag does not use up enough space or none at all inside the container block element, no matter what is its content.

The Web already tells me: Forget it!
But most of the pages I read are a little old and do not really focus on scrolling SVG. Maybe you know better.

Not that I would script this to produce static pages with inline-SVG, but ... really! Calling that a necessity is cruel and the ugliness of the procedure just appalling.

Do you really need code? The importance is more on the catchwords, above, I would say. And I want to make it clear. Please rather inform me, where my description is lacking precision.

TY a lot!

Last edited by Michael Uplawski; 12-03-2022 at 06:45 AM. Reason: stuff and words and stuff.
 
Old 12-03-2022, 07:36 AM   #2
boughtonp
Senior Member
 
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 3,077

Rep: Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169Reputation: 2169
Quote:
Originally Posted by Michael Uplawski View Post
Do you really need code?
Yes!

Actual code will explain what you're after in far fewer words/bytes than your description of that code, and reduces the number of questions that need asking.

Post the simplest working example you've got using inline SVG, then the equivalent but broken non-inline version.

 
Old 12-03-2022, 08:18 AM   #3
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 4,428
Blog Entries: 1

Rep: Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679
Does it work with other image-types?
 
Old 12-03-2022, 12:13 PM   #4
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
In the examples below, that I have prepared explicitly for this post, everything works, AFAIS, as I expected.

Difficulties arose during the creation of those pages:
  • The SVG-files that Inkscape creates, use the svg namespace for most tags and attributs, also xlink is still used as namespace for the href-attribute. I had to eliminate all these namespace designators.
  • A default height for the container tag (<div/>) had not been overwritten by the onload-function. I still do not understand this issue. But eliminating the style attribute “height” from the CSS section on top, has corrected this, scrolling makes sense, now. I still do not deem this correct behavior.
  • Edit/addition: stroke and stroke-width are set inline by Inkscape (with values 'none' or '0'), where there is no visible stroke in Inkscape. You find these details only in the XML-code of an SVG file. If I am not erring, CSS will not overwrite these inline-attributes.

What remains of my original post and problem description: It appears to be impossible to just store an SVG-file from Inkscape and then to reference it in an object tag, like in the first example. There is in any case, a lot of XML-manipulation necessary before this works. Automated generation of several such HTML-pages, as a consequence, appears to be almost (correction) impossible.

But automation was at the origin of my current endeavor.

Example pages:
1. external SVG-file:
HTML: https://www.uplawski.eu/div/svg/page1.html
CSS: https://www.uplawski.eu/div/svg/svg.css
SVG: https://www.uplawski.eu/div/svg/page1.svg
2. Inline SVG:
HTML: https://www.uplawski.eu/div/svg/page1b.html
Mark this thread by pushing the SURRENDER button.

Last edited by Michael Uplawski; 12-05-2022 at 07:31 AM. Reason: stuff.
 
1 members found this post helpful.
Old 12-05-2022, 07:34 AM   #5
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
The issue in the title is solved (SVG/HTML), but not for SVG-files ex Inkscape.
 
Old 12-06-2022, 10:10 AM   #6
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 4,428
Blog Entries: 1

Rep: Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679
Maybe something like this?
Code:
<html>
 <body>
  Image:
  <div style="width: 300px; height: 400px; border: 1px solid black; overflow: scroll">
   <img src="https://www.uplawski.eu/div/svg/page1.svg">
  </div>
 </body>
</html>
 
Old 12-06-2022, 12:57 PM   #7
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
You lose interactivity with the <img/> tag. Inline-SVG and the object tag are recommended for that. Both have caveats and/or advantages, I am in the middle of a quest... and maybe will sort out some of it. Sometimes.
 
Old 12-07-2022, 08:15 AM   #8
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 4,428
Blog Entries: 1

Rep: Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679
Maybe something like this?
Code:
<html>
 <body>
  Object:
  <div style="width: 300px; height: 400px; border: 1px solid black; overflow: scroll">
   <object type="image/svg+xml" data="https://www.uplawski.eu/div/svg/page1.svg">
  </div>
 </body>
</html>
 
Old 12-08-2022, 02:57 PM   #9
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
Quote:
Originally Posted by NevemTeve View Post
Maybe something like this?
Code:
<html>
 <body>
  Object:
  <div style="width: 300px; height: 400px; border: 1px solid black; overflow: scroll">
   <object type="image/svg+xml" data="https://www.uplawski.eu/div/svg/page1.svg">
  </div>
 </body>
</html>
In your opinion, how is that different from my example with the external SVG in post #4, apart from the inline-style?

There is one advantage in your example: You can have a javascript-routine overwrite the default values for height and width. With a centralized style for id or class, I have not succeeded in doing that but have eliminated the defaults. I should replace one CSS-class by another, instead.

But maybe you see other things, which I do not.

Last edited by Michael Uplawski; 12-08-2022 at 03:01 PM. Reason: clarification
 
Old 12-09-2022, 01:05 AM   #10
NevemTeve
Senior Member
 
Registered: Oct 2011
Location: Budapest
Distribution: Debian/GNU/Linux, AIX
Posts: 4,428
Blog Entries: 1

Rep: Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679Reputation: 1679
(I admit I really don't understand what you wish to accomplish, and if you succeed or not, and if you succeed what was the solution.)

Last edited by NevemTeve; 12-09-2022 at 01:08 AM.
 
Old 12-09-2022, 01:30 AM   #11
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
That remark would have helped the thread from the beginning.

What I want, is a scrollable SVG that I can style with CSS (and javascript). See question on top.
What I did was create SVG in Inkscape.

This did not work.

My hand-knitted examples in post #4 are achieved by manipulating the SVG-file prior integration in HTML.

I cite myself:
Quote:
Difficulties arose during the creation of those pages:
The SVG-files that Inkscape creates, use the svg namespace for most tags and attributs, also xlink is still used as namespace for the href-attribute. I had to eliminate all these namespace designators.
A default height for the container tag (<div/>) had not been overwritten by the onload-function. I still do not understand this issue. But eliminating the style attribute “height” from the CSS section on top, has corrected this, scrolling makes sense, now. I still do not deem this correct behavior.
Edit/addition: stroke and stroke-width are set inline by Inkscape (with values 'none' or '0'), where there is no visible stroke in Inkscape. You find these details only in the XML-code of an SVG file. If I am not erring, CSS will not overwrite these inline-attributes.
The “solution” is none as I still need to manipulate the XML-code of an SVG-file. This can be a lot of work if you want several such pages. I can try to write routines which automate all these processes, but go in favor of filing a feature-request for Inkscape. Bug-reports for the xlink-namespace have already been taken into account.

I venture, that a “Web-compatible” or “HTML-integratable” SVG type should be produced, as an alternative to all the others.

Edit: I found out about the extension which creates css-classes to replace common inline-styles on selected objects in Inkscape. But for the time, I cannot produce nice results with this function, as I have to adapt my own workflow again, to use it. It is anyway not a solution to the core-problem. Part of it, maybe.

On further thought, I should have posted this in “Software”, rather than “Programming”. The question would have boiled down to:

How in hell can I transform a programming problem into the Inkscape-usage problem that it should be?”

Edit: There is an old feature request on GitLab which is of such general nature that it covers my concerns as well.
Edit II: ... or not. New feature request.

Last edited by Michael Uplawski; 12-10-2022 at 05:58 AM. Reason: Gitlab 2x
 
1 members found this post helpful.
Old 01-21-2023, 06:30 AM   #12
Michael Uplawski
Senior Member
 
Registered: Dec 2015
Location: Non. Je suis propriétaire – No. I am an owner.
Distribution: Apple-selling shops, markets and direct marketing
Posts: 1,443

Original Poster
Blog Entries: 37

Rep: Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753Reputation: 753
The objective of this struggle is here.
 
  


Reply

Tags
html, object, overflow, scroll, svg


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
JAVASCRIPT/JQUERY - Variable not referenced, not-global?? pizzipie Programming 3 09-27-2013 07:14 AM
[SOLVED] Middle button click scrolling auto scrolling adampski Linux - Newbie 2 01-13-2013 08:32 AM
LXer: SVG Web: Google Brings SVG Support to Internet Explorer LXer Syndicated Linux News 0 08-25-2009 05:12 PM
slow scrolling on one machine, fast scrolling of same files on another rblampain Debian 5 01-22-2008 04:20 AM
hard scrolling vs soft scrolling (console) haxcess Linux - General 2 08-30-2004 01:17 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 10:41 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration