I'm working with an SVG file that requires the "preserveAspectRatio='true'" on the root element. The SVG is displayed using a standard tag. Currently I'm re-adding the attribute each time I update the SVG file in Illustrator. Is there an easier way to apply this attribute via CSS (or otherwise) so that I don't have to continually re-add the attribute?
<img src="image.svg#preserveAspectRatio=none" /> is the idealistically easy type of implementation I'm hoping for, but my fingers aren't crossed too tight.
The syntax according to the svg spec is:
<img src="image.svg#svgView(preserveAspectRatio(none))" />
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.
Why are custom elements in SVG invisible?
Composing Svg with Aurelia is similar to composing html. You have to make sure though that any custom elements are implemented containerless (either by decorating the ViewModel with the `#containerless' attribute or adding an attribute 'containerless' to the custom element tag. SVG is picky about elements that are not defined in the specification and attributes that have the wrong value type.
Even if you have taken care of making them containerless it is still possible the custom elements do not show, even though they are added to the DOM.
Checkout this GistRun. You would expect two white rectangles, that are present in the DOM, above the other elements. But they are not visible.
The reason the elements do not show is because of the comments Aurelia uses to track element positions (<!--<view>-->). You can avoid this issue by wrapping your elements in a SVG tag:
<template>
<svg>
...
</svg>
</template>
See this Gistrun for a working result.
Edit: Be sure to add an attribute overflow="visible" if you dont want the inner elements to be clipped by the SVG element:
<template>
<svg overflow="visible">
...
</svg>
</template>
More info in the Aurelia cheat sheet :
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9
I'm performing a F:AJAX call where I receive a byte Stream output whose content type is application PDF. I want this bytestream to be loaded in a JSF equivalent tag which should make me specify the content type as "Application/PDF" during tag declaration. Also, f:View fails saying content type not supported. Any JSF specific tags to cater this. Thanks.
Use iframe tag. This line shows how to use it:
<iframe src="foo.pdf" width="600" height="400" scrolling="no"></iframe>
If you also want to hide the (default) border, add frameBorder="0".
There is also pdf.js library that allows to browse pdf in browser. https://blog.oio.de/2014/04/11/integrating-pdf-js-pdf-viewer-web-application/
The answer is no there isn't such a tag.
To be honest there's no need to change it, since using HTML for this is fine and really the simplest way. You can use IFRAME (like Jay Smith shows you) or OBJECT.
The same way is presented on PrimeFaces's showcase:
<h3>PDF</h3>
<object type="application/pdf"
data="/showcase/resources/demo/media/guide.pdf?pfdrid_c=true"
height="300px" width="100%" internalinstanceid="3">
Your browser can't display pdf,
click
to download pdf instead.
</object>
Follow-up to How to embed SVG graphics properly in JSF application using OmniFaces
I'm using the OmniFaces 2.1 snapshot in order to output SVG files from byte[] arrays. I need to suffix #a on SVG URL's in order to activate a CSS style inside the SVG.
Example img:
<img src="/web/javax.faces.resource/ApplicationBean_getImageById_svg.xhtml?ln=omnifaces.graphic&v=0&p=106.1%23a">
As you can see, my #a is appended at the right side of the URL as %23a.
If this had been a regular URL it would be
<img src="106.1.svg#a" />
It would then pick the CSS style and, in my case, paint the background of this sign yellow.
I'm really hoping BalusC comes to my rescue here. Heh. :)
As per this commit, the <o:graphicImage> got a new fragment attribute. This should enable you to pass SVG view modes via URL fragment identifier. It's available in today's 2.1 SNAPSHOT.
E.g.
<o:graphicImage value="#{bean.svg(imageId)}"
type="svg" fragment="svgView(viewBox(0,200,1000,1000))" />
Depending on parent html tag of an SVG object, I would like it's path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here's an example:
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
<object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>
Granted, this can't be done, but is there an alternative without using JavaScript?
Starting again, this is the best question/answer to your problem that I can find:
How to apply a style to an embedded SVG?
It's possible for you to add a linked stylesheet to the file you wish to embed by hand...
Thereby avoiding the use of JavaScript.
I would argue that you should try not to ask redundant questions.
We'd have both done well to have sourced this earlier.
Yes you can.
SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.
Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.
That said, if you're not planning to use JavaScript, then do it with CSS instead.
Updated with a working example, found here;
http://jsfiddle.net/Zp6HS/4/
Replacing the 'circle' element with your custom path, and the css properties you want to change.
Can't you use the 'parent of' operator in css? Like so:
<style>
header > svg {
fill:blue;
}
body > svg {
fill:black;
}
</style>