Giters

jasikpark / astro-svg-loader

Import SVG's as Astro components

Home Page:https://stackblitz.com/github/jasikpark/astro-svg-loader/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

resolve output markup issues

kireerik opened this issue · comments

commented

  • The xmlns tag on the output svg element should not be included.

  • elements (</>) should be preserved as is (instead of expanding them to <></>).
    example element names:

    • path, stop, circle, ellipse, use
      , linearGradient
      , feMorphology, feOffset, feGaussianBlur, feComposite, feColorMatrix

 

 
related similar issue (1. 2 issue is the same):

commented

Please provide more context for this - is this an XML issue?

commented

I will give an example:

This is the imported (input) SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="739 407 31.791 31.028"><path d="M754.894 407a15.894 15.894 0 0 0-5.022 30.973.8.8 0 0 0 1.085-.766c0-.378-.014-1.377-.022-2.703-4.42.96-5.353-2.13-5.353-2.13a4.204 4.204 0 0 0-1.765-2.325c-1.443-.987.11-.966.11-.966a3.339 3.339 0 0 1 2.439 1.638 3.383 3.383 0 0 0 4.625 1.32 3.394 3.394 0 0 1 1.009-2.125c-3.529-.401-7.239-1.765-7.239-7.855a6.145 6.145 0 0 1 1.636-4.264 5.716 5.716 0 0 1 .156-4.206s1.335-.427 4.37 1.629a15.067 15.067 0 0 1 7.957 0c3.034-2.056 4.366-1.629 4.366-1.629a5.71 5.71 0 0 1 .158 4.206 6.134 6.134 0 0 1 1.629 4.264c0 6.106-3.716 7.449-7.256 7.842a3.79 3.79 0 0 1 1.079 2.944c0 2.125-.019 3.839-.019 4.36a.797.797 0 0 0 1.093.764 15.895 15.895 0 0 0 10.653-17.627A15.894 15.894 0 0 0 754.894 407z" fill-rule="evenodd" fill="#666"/></svg>

The (actual) HTML output for it is something like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="739 407 31.791 31.028"><path d="M754.894 407a15.894 15.894 0 0 0-5.022 30.973.8.8 0 0 0 1.085-.766c0-.378-.014-1.377-.022-2.703-4.42.96-5.353-2.13-5.353-2.13a4.204 4.204 0 0 0-1.765-2.325c-1.443-.987.11-.966.11-.966a3.339 3.339 0 0 1 2.439 1.638 3.383 3.383 0 0 0 4.625 1.32 3.394 3.394 0 0 1 1.009-2.125c-3.529-.401-7.239-1.765-7.239-7.855a6.145 6.145 0 0 1 1.636-4.264 5.716 5.716 0 0 1 .156-4.206s1.335-.427 4.37 1.629a15.067 15.067 0 0 1 7.957 0c3.034-2.056 4.366-1.629 4.366-1.629a5.71 5.71 0 0 1 .158 4.206 6.134 6.134 0 0 1 1.629 4.264c0 6.106-3.716 7.449-7.256 7.842a3.79 3.79 0 0 1 1.079 2.944c0 2.125-.019 3.839-.019 4.36a.797.797 0 0 0 1.093.764 15.895 15.895 0 0 0 10.653-17.627A15.894 15.894 0 0 0 754.894 407z" fill-rule="evenodd" fill="#666"></path></svg>

The expected HTML output would be this:

<svg viewBox="739 407 31.791 31.028"><path d="M754.894 407a15.894 15.894 0 0 0-5.022 30.973.8.8 0 0 0 1.085-.766c0-.378-.014-1.377-.022-2.703-4.42.96-5.353-2.13-5.353-2.13a4.204 4.204 0 0 0-1.765-2.325c-1.443-.987.11-.966.11-.966a3.339 3.339 0 0 1 2.439 1.638 3.383 3.383 0 0 0 4.625 1.32 3.394 3.394 0 0 1 1.009-2.125c-3.529-.401-7.239-1.765-7.239-7.855a6.145 6.145 0 0 1 1.636-4.264 5.716 5.716 0 0 1 .156-4.206s1.335-.427 4.37 1.629a15.067 15.067 0 0 1 7.957 0c3.034-2.056 4.366-1.629 4.366-1.629a5.71 5.71 0 0 1 .158 4.206 6.134 6.134 0 0 1 1.629 4.264c0 6.106-3.716 7.449-7.256 7.842a3.79 3.79 0 0 1 1.079 2.944c0 2.125-.019 3.839-.019 4.36a.797.797 0 0 0 1.093.764 15.895 15.895 0 0 0 10.653-17.627A15.894 15.894 0 0 0 754.894 407z" fill-rule="evenodd" fill="#666"/></svg>
commented

ah, ok maybe there's a flag i can set in ultrahtml to do that..

commented

I am not exactly sure how this library works. But a simple approach could be that we take the content inside of the svg tag and add that as is and remove the xmlns attribute and add the rest of the properties as it is done currently as well.
As I can see inline-source probably does something like that (which I used previously and that library does work properly):

commented

Eventually I preferred using (static) Astro (page) (file) endpoints (instead of (Astro) components).

So I can just use raw imports and a utility function:

refo

/example/index/

commented

sounds like you sorted your issue, i'll close.