Could use a third include tag. an 'include_absolute'?

I have svg files that I’d like to use sometimes inside an
<img src="assets/apple.svg">,
but sometimes inline, like say, in a
<div><svg><circle /></svg></div>.

To include the svg files in <img src="apple.svg"> I keep my file in an assets directory (or other, but not an _underscored directory like _includes),
but to include the svg inline I must keep a copy of the file in my _includes directory: <div>{% include apple.svg %}</div>

Using {% include_relative %} gets me what I want, svg as files or inline code,
but it forces me to keep svg files in the same directory as the file making use of it, or one of its subdirectories. I can’t organize my markdown/html files in subdirectories because the file path in {% include_relative file-path %} can’t go up a level.

Can I keep my svg files in a single place?
Am I missing something?

  |-- red-things.html
  |-- svg /
         |-- apple.svg
         |-- fire-hydrant.svg
         |-- tennis-ball.svg
  |-- other /             # I can organize my svg files, but, if I want to use 
  |-- directories /       #  include_relative I can't organize my md/html files
1 Like

have you tried them as collection items? just an idea, not using svg yet so maybe it won’t do what you want, but it seems like it might.

I don’t see how though.
Collections can help organize text/html files into different directories/collections but any file I want to include in files from different collections/directories, would still have to exist at multiple locations.

  |--          # this,
  |-- red-things.html    # this,
  |--    # and this file can {% include_relative svg/apple.svg %}
  |-- svg /
         |-- apple.svg
         |-- fire-hydrant.svg
         |-- tennis-ball.svg
  |-- other /      
         |--       # but
  |-- directories /  
         |--   # these
  |-- _collectionOne /  
         |--   # three files, **can't** {% include_relative ../svg/apple.svg %}
  |-- _collectionTwo /  
         |--   # to use {% include_relative apple.svg %} here, I'd need a
         |-- apple.svg    # duplicate
|-- _includes/
         |-- svg/
                |-- apple.svg   # any file, anywhere, 
                |-- fire-hydrant.svg  # could {% include svg/apple.svg %}, but 
                |-- tennis-ball.svg  # since files in _includes don't make it to _site, 
                |-- tomato.svg  # can not have <img src="_includes/svg/apple.svg>

I’m talking about putting the svgs in the collection, not the article itself.

I don’t use svg but I think I understand what you need. I would try to put an svg into a collection with front matter and an .svg extension.

Then see if:

  1. it works as an svg file directly
  2. if you can acces the content of that file to use it inline.

I don’t know that it will work, but it might. you can do this type of thing for an xml file, or json, not really sure that jekyll cares about the extension.

I can accomplish #1 so far. For it to be a file it needs the xml declaration at the top right? but then inline you don’t need that? then I think it would need a layout to add that so when you access the content it isn’t there.

I really do not get the problem. As far as I can see there are two options:

  1. An option where the SVG can be cached, which requires an image tag and an external SVG file.
  2. An option where the SVG cannot be cached, which does NOT require an image tag and loads the SVG inline.

It seems to me you have to choose. For option 2 you just write {% include svg/apple.svg %} and for option 1 you just write <img src="/uploads/svg/apple.svg" />.

What am I missing?

I’d like to do both without having two versions of the file.

Sounds nice… but also impossible, if you ask me.

1 Like