/    Sign up×
Community /Pin to ProfileBookmark

Quickly make SVG including HTML overlay?

There’s a diagram I’m interested in saving although the file doesn’t include the text which is displayed in the diagram that seem to come from the HTML embedding the SVG file which relevant part is

<div class="paragraph">
  <div class="fixed-to-responsive svg-image" style="max-width: 474px; max-height: 181px;">
    <div style="padding-bottom: 38.19%;"></div>
    <img src="https://cdn.kastatic.org/ka-perseus-graphie/3847ed60b4216b14d20e21e161b45eb0ff7a4149.svg" alt="" tabindex="0">
    <div class="graphie-container">
      <div class="graphie" style="position: relative; width: 100%; height: 100%;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
          <desc>Created with Raphaël</desc>
          <defs></defs>
        </svg>
        <span class="graphie-label" style="position: absolute; padding: 7px; color: black; left: 34.1772%; top: 64%; margin-left: -56px; margin-top: 0px; fill: none; font-size: 100%; font-weight: bold;">Whole numbers</span>
        <span class="graphie-label" style="position: absolute; padding: 7px; color: black; left: 34.8101%; top: 29.3333%; margin-left: -32px; margin-top: 0px; fill: none; font-size: 100%; font-weight: bold;">Integers</span>
        <span class="graphie-label" style="position: absolute; padding: 7px; color: black; left: 34.8101%; top: 5.33333%; margin-left: -60px; margin-top: 0px; fill: none; font-size: 100%; font-weight: bold;">Rational numbers</span>
        <span class="graphie-label" style="position: absolute; padding: 7px; color: black; left: 78.481%; top: 40%; margin-left: -63px; margin-top: 0px; fill: none; font-size: 100%; font-weight: bold;">Irrational numbers</span>
      </div>
    </div>
  </div>
</div>

from https://www.khanacademy.org/math/cc-eighth-grade-math/cc-8th-numbers-operations/cc-8th-irrational-numbers/a/classifying-numbers-review

I know I could open the SVG file with Inkscape and paste the text in to roughly reproduce the image but I’d like to know if there’s a way to quickly do so. Is there a software, script, or website that could do the job without me having to basically remake the image?

I’d select for skills of this post SVG & vectorial image but I can’t seem to find how to do so.

Thank you kindly for your help

to post a comment
HTML

0Be the first to comment 😎

×

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 6.19,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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