To import and use svg file in sveltekit I refer to this article
https://riez.medium.com/svelte-kit-importing-svg-as-svelte-component-781903fef4ae
By the way, when I finally input the code
<svelte:component this={Logo} />
I got the error like below
<svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
I wish someone help me with this problem.
There is a SvelteKit plugin for inlining SVG:s. You can use the plugin in three different ways:
As a Svelte Component
As URL (e.g for use in an img tag)
As raw text (e.g for use in {#html rawText})
https://www.npmjs.com/package/#poppanator/sveltekit-svg
Looking through the article it seems to be solving a problem that doesn't exist in a way that is much more elaborate than needed.
In Svelte you can make a .svelte component that only contains SVG markup (inline), then use the svelte:component tag as you would with any other content.
Parent.svelte
<script>
import Circle from './Circle.svelte'
</script>
<svelte:component this={Circle} />
Circle.svelte
<svg viewbox="0 0 200 200">
<circle cx="100" cy="100" r="20"/>
</svg>
Here's a REPL showing how to switch between components that only have SVG in them.
You can even add stuff to the SVG components to make them dynamic since it's just markup like shown in this REPL.
In svelte-kit You can fix it by trying
<img src={YourSVGComponent} />
It worked for me.
Related
recently i learned how to combine svg elements into a combined path using inkscape and would now like to do it programmatically, but cannot reason how to do it with the inkscape api, inkex.
my document has <use /> elements, which in inkscape 1.x show as path entities with the path tool, so, i figured i'd first try and just coerce the use into a path:
if el.TAG == 'use': self.svg.replace(el, el.to_path_element())
but inside of elements.py, on the to_path_element call, it throws with AttributeError: Can't find attribute Use.path.
anyone have ideas on how to convert <use /> to <path /> programatically?
question ported from: https://graphicdesign.stackexchange.com/questions/132243/inkscape-extension-covert-use-node-to-path-node
I am using ember-inline-svg, there is a logo.svg file, I'm calling it with
{{inline-svg 'logo' class="logo" }}
in my hbs file.
It works fine. I just need to send one more data param to it and access that in the svg file so that I can dynamically generate svgs. How would I go about doing that?
what you want is not possible, because svg itself has no dynamic parts.
however you probably don't need ember-inline-svg at all. Could it be a possibility to put your svg inline into a component?
Just create a component Logo and put the svg inside the logo.hbs:
<svg height="60" width="200" ...attributes>
<text y=20 >I love {{#name}}</text>
</svg>
Then set tagName: '' (or use a template-only-glimmer-component). Then you can just use it as a component:
<Logo class="logo" #name="Ember" />
So I've recently encountered this warning
SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
Doing as much research as I could, I keep finding excuses about replacing SMIL with web animations (which SMIL is if we're being technical) but this all involves JavaScript and CSS. I use animated SVGs in <img> tags because that's the point of the SVG format: it's an image.
This was really nice and all because it allowed me to at least organize my images on a web that's notorious for being a giant mess (e.g. JavaScript has no imports so you have to fill the global scope).
Now that I can't animate with SVG, is GIF the only option for self-contained animations?
SMIL is not as dead/deprecated as you believe it is. The Chrome developers recently posted this:
We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
In SVG2, most of the SMIL functionality should be available through CSS animations.
But these are still in draft, and only chrome has started implementing some.
Also, chrome message is just a deprecation message, it' not removed yet from this browser, and I doubt other browsers supporting it will remove it any soon.
Anyway, you can already achieve SMIL like animations on browser not supporting it (e.g IE) thanks to javascript polyfills like fakesmile.
Unfortunately, scripts in svg documents loaded through the HTMLImage element (<img>) won't run. So you have to switch from the <img> tag to the <iframe>, <object> or <embed> tags. These tags do allow the execution of scripts, so you just have to import the polyfill in your svg document, and then load your image as you would do within an <img> tag.
Here is an example that will work on IE :
SMILTest.svg
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML"
attributeName="x"
from="-100" to="120"
dur="10s"
repeatCount="indefinite"/>
</rect>
<script xlink:href="https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js"></script>
</svg>
index.html
...
<object data="SMILTest.svg"></object>
...
Live example
If all your svg images are served from the same domain as your main page, you could also automate it with something like that :
window.addEventListener('load', function(){
var obj = document.querySelectorAll('object[data*=".svg"],iframe[src*=".svg"],embed[src*=".svg"]');
Array.prototype.forEach.call(obj, function(o){
var doc = o.contentDocument;
var s = document.createElementNS('http://www.w3.org/2000/svg','script');
doc.documentElement.appendChild(s);
s.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js');
});
});
Live example
I'm trying to make a react Component which is based on this CodePen markup.
My component looks like this:
import React from 'react';
class Arches extends React.Component {
render(){
return(/*markup from codepen*/);
}
}
export default Arches;
But on render it breaks:
unexpected token (764:3)
762 | d="m 46.842051,219.06796
What is the proper way to integrate SVG in a React component?
React does support SVG, but the main problem here is that JSX is not identical to HTML. You can't just copy-paste any old blob of HTML or SVG markup and expect it to work in JSX without some effort to clean it up. The main problems with this particular SVG snippet are:
JSX doesn't allow HTML-style comments, like this one from your example:
<!-- Child Dentition -->
You'll either need to remove these completely, or replace them with JSX Javascript-style comments:
{/* Child Dentition */}
JSX doesn't support XML namespaces. So namespaced elements like here won't work:
<metadata id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title>Human Dental Arches</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
In fact, if you look at the list of supported SVG tags, metadata is not even included, so this section can be removed outright since it doesn't affect the visual output anyway. And also note that namespaced attributes like xml:space won't work either:
<text xml:space="preserve" x="87.802124" y="124.42228" style="font-size:10.13467216px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans">
JSX uses the className attribute instead of class. This is necessary because class is a reserved keyword in Javascript, so anything like this:
<path class="tooth-11 tooth-11-parent" />
Should become this:
<path className="tooth-11 tooth-11-parent" />
The style attribute in JSX takes a Javascript object, not a string literal. So values like this:
<path style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
Will need to be turned into:
<path style={{fill: 'none', stroke: '#000000', strokeWidth: 1, strokeLinecap: 'round', strokeLinejoin: 'miter', strokeMiterlimit: 4, strokeOpacity: 1, strokeDasharray: 'none'}} />
Okay, that's a lot of changes! But as a reward for reading this far, I can let you know there's an easy way to make most of these transformations: this page on the React documentation site will let you paste in arbitrary HTML snippets and output the corresponding JSX. It seems this doesn't take care of the namespace issues I mentioned above, but with a few manual fixes you can end up with some valid JSX that will display nicely.
I am using the foreignObject element in SVG, however IE9 does not support this element. I am looking at a way the detect this feature. Modernizr does not detect this feature and it seems I can not use createSVGForeignObject (not available on SVGSVGElement) like they do for rectangle (createSVGRect).
Thanks!
This should work if you want to use foreignObject because it integrates html content...
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" requiredExtensions="http://www.w3.org/1999/xhtml">
<foreignObject >
</foreignObject>
</g>
<text font-size="10" font-family="Verdana">
No foreignObject
</text>
</switch>
The requiredExtensions part proposed to w3c and this was their response. Firefox does implement this, but I havent tested anything else though. You may be able to get away with just the requiredFeatures attribute as Erik suggests.
If you want to test in javascript try
var supported = document.implementation.hasFeature("http://w3.org/TR/SVG11/feature#Extensibility", "1.1"); –
There is a way to test this feature in JS, the following was borrowed from a recent commit to modernizr (https://github.com/Modernizr/Modernizr/commit/ee836f083f29a9e634df731400027c24630a75f3):
var toStringFnc = ({}).toString;
Modernizr.addTest('svgforeignobject', function() {
return !!document.createElementNS &&
/SVGForeignObject/.test(toStringFnc.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')));
});