0

I have this SVG file that I can either use as an img or a code in my HTML section, but I want to modify it through CSS, which is possible only if I insert the SVG file as an HTML file into my main HTML <body>.

I have tried to import it through <link rel="import href" "> and <link itemprop="location" href="location">, but it's not working. I want to know how I can insert or add a new HTML file to my HTML <body>.

I was following Travis Neilson's video tutorial for this and he used {%include example.html%} to insert the file. I don't know what platform or tool or mixin he used, but is it possible to add an HTML file inside the body of another HTML file?

Kr Digvijay Singh Champawat
  • 11
  • 5
  • Why not add the styles into the SVG using `` - have a look at this http://www.sitepoint.com/svg-styling-with-css/ – StudioTime Mar 13 '16 at 17:42
  • You can insert html file inside div via jquery, refer [this article](http://stackoverflow.com/questions/18145273/how-to-load-an-external-webpage-into-a-div-of-a-html-page) – Techie Mar 13 '16 at 17:48
  • Thanks Darren, the example was useful and i learned a new thing and inline editing is usefull, but i do not want to use the whole xml code in my main page, i wish to save it as a html and use the html file in my `` so that i looks clean and neat. example: i will save the svg file code a a new html file and then use css to change it colour: `#logo{ path{ fill:rgba(0,0,0,0.7)}}` – Kr Digvijay Singh Champawat Mar 13 '16 at 18:02
  • So paste it in where you want with a text editor, what's the problem? – Robert Longson Mar 13 '16 at 18:34

1 Answers1

0

There is a comprehensive tutorial here: Using SVG

Look for the Using "inline" SVG section. You will find examples and so on. There is the capability to style SVG elements in CSS, but I won't discuss it here; you can find all you need in the link above. Hope it helps.

P.S. Another good tutorial here.

OR

Do you wish to include a server-stored SVG in the client's browser? If so, get it with an Ajax request and insert it in the DOM as you wish (I can search for an example if you don't know how to do it).

iModi
  • 101
  • 12
  • and regarding strictly your question: inserting a html file in another can be done with an iframe, but this will not solve your svg problem. – iModi Mar 13 '16 at 18:21
  • Thanks @iModi. Well, as of now, i have not found the exact solution to my requirement, but i have gone through your "css tricks" link, and now i am using object to render the svg file and using css inside the svg file to modify it. Thanks again – Kr Digvijay Singh Champawat Mar 13 '16 at 19:43