This shows the SVG in the preview. When you publish this, it doesn't show the SVG because it's located in assets/img/... folder. So the code needs to be:
Upload your SVG files to your server and use absolute URLs to reference them. Once you know everything is working as it should, you can always go back in the app and change those URLs back to relative so they work correctly on export. I'm not aware of any other work arounds at this time, if someone else is, please do share!
In the meantime I would suggest you put this in the Ideas forum so that the devs are aware that we want it. I will definitely +1 it. Do a search first and see if someone may already have done so and just +1 theirs which will bump it up for the devs to see others are interested as well.
I don't believe paths are adapted in anything within a custom code block actually. So far I haven't seen any that have at least. I have had to always reference them as mentioned in my previous post because of this.
What I am wondering now though, is if what I learned this past weekend would work for this situation. From what Martin was saying, using the forward slash / before a link tells the browser to look for the file starting with the root directory. So ... would this fit here as well? If we put a / in front of the "assets" part of the links will it then know exactly where to go? If so then we are fixed! I had forgotten about that before I posted, but was just reminded. So if you put your link as:
data="/assets/img/Clip_art_grouped.svg"
That should work, if I understood what Martin was talking about. Were were discussion a different situation, but I would think the same would apply here.
Are you using the custom code in order "to" use the SVG image, or is the custom code part of something else that it needs to be an object? SVG can be imported and viewed in both the app and the browser, and because you can add them the same as you would any other image, there's no need for custom code to use them. Since I'm not sure if there is another reason for the object script, that's all I can offer in advice/knowledge. Other than that if it needs to be a script, you will have to upload them and reference the absolute URL's for now. Hopefully there will be a change to give us more reference ability with things that are within Custom Code, as well as the ability to import a more versatile set of items like PDF's and sound files, videos etc. so we don't "have" to do the absolute URL to make them work in all 3 places.
I need to access the SVG with Javascript, hence I can't use an IMG as this doesn't give access to the SVG DOM.
I can create a component that load the SVG dynamically, but again, the "app preview" wouldn't work I guess. I would like to have a mode, where the editor and preview are merged.
Hmm well I'm not one on javascript or jquery so I can't help much there. I just know I can import an SVG file to the Images section of the right area of the app. I can then drag the image wherever I want it and it shows up in app, the preview and the browser preview. I'm sure it would show up in the uploaded site as well. But, if you need to reference it in javascript stuff, that I'm not sure how to do other than once again, bringing it back to uploading it and referencing the absolute URL.
I definitely agree that there "should" be a way to make our custom components behave like the rest so we can reference them with the same structure as if it were added to the native components. Wish I could give you better news on it, but hopefully we'll see some growth here, we're not the first to request this or report this issue, and as I said it does go along with the ability to import some other types of files as well and reference them internally rather than absolute URLs as well.
The app is still growing in leaps and bounds, so I'm sure Martin and the devs will see that we have what we need before it's set to maintenance mode. :)