CODEWITHSUNDEEP
javascripthtmlcsssvgimport
Levi007
Levi007

Reputation: 335

How do I import a SVG file so that I can access its properties?

I have a large SVG and I need to access its 'path' to modify.

I pasted SVG directly in my app. but I want to split my code and make it more clear. so I moved my SVG in an SVG file and I need to import the SVG file so that I can access its 'path'.

solutions that I found are using img tag. But this way I can't access 'path'.

Upvotes: 2

Views: 3979

Answers (3)

Mary Layman
Mary Layman

Reputation: 57

I use very large SVG files as well. My SVG is organized using separate groups (g) that are assigned a css attribute. Then, I can use Greensock (gsap) to animate. The tricky part is that SVGs are very sensitive. For path-based animations, they must be put in html (not linked to svg file).

So, to overcome that clutter you are describing. I started creating what I call "content blocks". You create a content block such as large-svg-file.html and then use a single line of "include" script for the intended page. This is ALSO handy if you wish to use this content block on different web pages.

Example: @@include('./blocks/large-svg-file.html')

Note: I usually put these files in a folder called "blocks" to separate them out from the primary html files.

I am not sure if you are using PHP, Grunt, Gulp (server-side include), or whatever; but, sadly there is no include code that is html only. So, you will need to pick your favorite solution. Here is a great tutorial that shows you how to apply the option of your choice: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

Upvotes: 1

Deepak Champatiray
Deepak Champatiray

Reputation: 121

The trick is to use the HTML "object" tag to embed the SVG.

<object type="image/svg+xml" data="src/beacon.svg" class="logo">
  Beacon Logo <!-- fallback image in CSS -->
</object>

After you do so, you can target the "object" tag by using "querySelector" and then get access to the SVG document by using "getSVGDocument()" method. After that use regular Javascript to select the paths from the document and manipulate as you like. Pseudo code is as follows;

let svgDoc = document.querySelector("object.logo").getSVGDocument();
let svgPaths = svgDoc.querySelectorAll('path');

Upvotes: 4

Ishita Ray
Ishita Ray

Reputation: 666

You can open it any browser & inspect the code and copy it. And put in a html file for modify.

Upvotes: -2

Related Questions