/    Sign up×
Community /Pin to ProfileBookmark

SVG + text file names = HTML content

Copy linkTweet thisAlerts:
Nov 15.2020

So I have multiple SVGs that I’ve downloaded that I’d like to keep as is. The majority of the time their color represent something and I save their label in a text file. To save me the hassle of having those in seperate programs and switching in between multiple times, as I don’t have a good memory, I’d like them to be in the same HTML file so I just have to scroll up & down to access their respective content.

I know I could copy-paste the text file in the HTML file but I’d prefer the text file content to be injected in each loading, in case I’d modify the source (I want it in a text file to make it real simple & quick to modify).

Thank you kindly for your assistance

to post a comment
Full-stack DeveloperHTMLJavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumNov 15.2020 — You can easily include your SVG's and the content of your text files by PHP-include. However this requires a webserver and the HTML files being renamed to .php. If you intend to use these files locally you would have to install a local webserver software.
Copy linkTweet thisAlerts:
@DynVauthorNov 15.2020 — I was thinking something among the line of ECMAscript, of course not knowing if that's even possible.
Copy linkTweet thisAlerts:
@SempervivumNov 15.2020 — Yes, it is also possible to include the files by ECMA script and Ajax, however this requires a web server either as the browsers reject it if the site is not running on a webserver. Regarding the SVG images: These can be easily displayed by an img tag. An object tag might be a workaround for including the text files, however there is one disadvantage: I doesn't adjust it's size to it's content, i. e. the text from the file.
Copy linkTweet thisAlerts:
@DynVauthorNov 15.2020 — <br/>
&lt;!DOCTYPE html&gt;<br/>
&lt;html lang="en"&gt;<br/>
&lt;head&gt;<br/>
&lt;meta charset="utf-8"&gt;<br/>
&lt;title&gt;Confederate States of America&lt;/title&gt;<br/>
&lt;/head&gt;<br/>
&lt;body&gt;

&lt;p&gt;&lt;img src="../../Downloads/FILE_NAME.svg"&gt;&lt;/p&gt;

&lt;p&gt;&lt;object data="../../Downloads/FILE_NAME.txt" width="500" height="200"&gt;&lt;/object&gt;&lt;/p&gt;

&lt;/body&gt;<br/>
&lt;/html&gt;<br/>


was exactly what I was looking for. Unlike what I understood from your previous post, I didn't need to install XAMPP to make that work; I'm using FF.
Copy linkTweet thisAlerts:
@SempervivumNov 15.2020 — Yes, object tag works without a web server.
Copy linkTweet thisAlerts:
@DynVauthorNov 15.2020 — I was trying to edit my former post but I don't have permission it seems, this is what it should be:

<br/>
&lt;!DOCTYPE html&gt;<br/>
&lt;html lang="en"&gt;<br/>
&lt;head&gt;<br/>
&lt;meta charset="utf-8"&gt;<br/>
&lt;title&gt;Confederate States of America&lt;/title&gt;<br/>
&lt;/head&gt;<br/>
&lt;body&gt;

&lt;p&gt;&lt;img src="../../Downloads/FILE_NAME.svg"&gt;&lt;/p&gt;

&lt;p&gt;&lt;object data="../../Downloads/FILE_NAME.txt"&gt;&lt;/object&gt;&lt;/p&gt;

&lt;/body&gt;<br/>
&lt;/html&gt;<br/>


was exactly what I was looking for. Unlike what I understood from your previous post, I didn't need to install XAMPP to make that work; I'm using FF.

Is <object> block-level? As in if it is, I don't need to embed it in <p>. I wasn't able to figure it out from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object Also, I couldn't figure out how to properly include a multi-line code here.
Copy linkTweet thisAlerts:
@DynVauthorNov 15.2020 — I was trying to edit my former post but I don't have permission it seems, this is what it should be:

<br/>
&lt;!DOCTYPE html&gt;<br/>
&lt;html lang="en"&gt;<br/>
&lt;head&gt;<br/>
&lt;meta charset="utf-8"&gt;<br/>
&lt;title&gt;Confederate States of America&lt;/title&gt;<br/>
&lt;/head&gt;<br/>
&lt;body&gt;

&lt;p&gt;&lt;img src="../../Downloads/FILE_NAME.svg"&gt;&lt;/p&gt;

&lt;p&gt;&lt;object data="../../Downloads/FILE_NAME.txt" width="100%"&gt;&lt;/object&gt;&lt;/p&gt;

&lt;/body&gt;<br/>
&lt;/html&gt;<br/>


was exactly what I was looking for. Unlike what I understood from your previous post, I didn't need to install XAMPP to make that work; I'm using FF.

Is <object> block-level? As in if it is, I don't need to embed it in <p>. I wasn't able to figure it out from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object Also, I couldn't figure out how to properly include a multi-line code here.
Copy linkTweet thisAlerts:
@DynVauthorNov 15.2020 — <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>SUBJECT</title>

</head>

<body>

<p><img src="../../Downloads/FILE_NAME.svg"></p>

<p><object data="../../Downloads/FILE_NAME.txt" width="100%"></object></p>

</body>

</html>

`

was exactly what I was looking for. Unlike what I understood from your previous post, I didn't need to install XAMPP to make that work; I'm using FF.

Is <object> block-level? As in if it is, I don't need to embed it in <p>. I wasn't able to figure it out from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object Also, I couldn't figure out how to properly include a multi-line code here.
Copy linkTweet thisAlerts:
@SempervivumNov 15.2020 — > I couldn't figure out how to properly include a multi-line code here.

You can use code tags `your code here` or triple backtics.
×

Success!

Help @DynV spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...