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
Related
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.
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 have a single SVG file that holds a collection of different paths:
<!-- icons.svg -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="foo" .../>
<path id="bar" .../>
...
</svg>
and within my webpages, I use these SVG icons:
<!-- index.html -->
<svg viewBox="0 0 256 256">
<use xlink:href="icons.svg#foo">
</svg>
and this works just fine and exactly how I intend -- we select the SVG with the id foo from the icons.svg file.
Now, if I try to give the xlink:href attribute for the <use> tag an _absolute_ path to my icons.svg file, it fails and returns nothing and seems to be unable to find the file..
<svg viewBox="0 0 256 256">
<use xlink:href="http://localhost:8080/icons.svg#foo">
</svg>
It's important to note that the absolute path is correct.
The documentation on xlink seems to suggest that absolute paths are valid values, which makes me wonder why it doesn't work here for me -- am I missing something?
Is there an alternative approach I should be considering? Is this currently not the approach I want to take to achieve something like this?
You have to be sure you are loading your external svg file from the same protocol and port, otherwise, browsers will block the request, according to the same-origin policy.
Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.
(emphasize mine)
I have a reusable SVG component that contains some templated content. As part of the component default function, I'd like to include a shadow/reflection visual effect.
So, easy, right; use and done. Except, here's a reduced example to show the problem I'm having:
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="blue" />
</g>
</svg>
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="red" />
</g>
</svg>
Will each reflection be red, or blue? Because the element can be reused, and each instance is potentially different, I can't rely on a constant id attribute.
I'd prefer to avoid assigning id pairs to each instance via script. I couldn't find anything useful in the W3C xlink spec, but there's enough jargon there that I may have missed something.
Is there a supported way to include a relative use, or perhaps a similar result via another declarative feature?
EDIT: I know it is invalid to include multiple elements with the same id. That is why I want a way to create a reflection from a relative declarative reference. Can this be done?
Having two items with the same id in the same document is invalid.
A <use> element must point to an id and each id must be unique, there's no such thing as a relative <use>
Each reflection should be blue.
You'll need to generate unique ids.
I'm trying to create an SVG document that includes image tags referencing png files. This works if I include the absolute path of the png in every image tag but if I try putting an xml:base attribute in it doesn't seem to work in IE9. However it does seem to work Firefox and Chrome. Is there a bug in IE or is there something wrong with my syntax?
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:base="file:///C:/SVG/Devices/valves/">
<image width="40" height="56" x="10" y="10" xlink:href="motorised_valve[purple].gif"/>
</svg>
For complicated reasons I don't want to go into here, I can't put the SVG document into the same folder as the images.
Thanks for any help
Mog
Would it be acceptable in your case to embed your PNG images in your document using the data:// protocol? That would solve your problem, at the expense of potentially making the XML rather large.