In Vue 2 I used vue-svg-loader and it loaded my SVG file as a regular SVG tag. But in view 3, the vue-svg-loader refuses to work.
I have already read the previous question and documentation, but it didn't help at all. I need to use a SVG-component to access properties such as: fill, stroke, etc in styles.
Are there other/plugins that will help with the solution?
Related
Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="#Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?
Basically 2 steps
Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1
ca. like this
<div>
#Html.Raw(System.IO.File.ReadAllText(fileName)
</div>
Some examples of how to do this can be found below
Using the fetch API
How to convert image (svg) to rendered svg in javascript?
Older methods such as XMLHttpRequest or jQuery
Include SVG files with HTML, and still be able to apply styles to them?
Using D3
(Embed and) Refer to an external SVG via D3 and/or javascript
Using a custom JS library
One example: SVGInjector
Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View.
https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123
And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.
I got in trouble during developing react. I use
<img src="example.svg">
Or using module 'react-inlinesvg' to embed the svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
i want to manipulate the<g>node of the svg file directly in react, add and remove class(ps: it's quite easy in JQuery). I tried to get the ref of the element but failed. what should i do?
There are 2 options:
Use some kind of query selectors;
User react for writing SVG;
I would recommend you using 2nd approach. If you want to manipulate your own SVG, you can just write them in React as a component and work as you work with other React components.
Here you can see a list of supported elements in React.
For a mobile app (built with the Ionic framework), I want to use a diagram I created with Google Spreadsheets. Following the steps described on this page I managed to save the diagram as an .svg file by copying the svg code shown in Chrome Dev Tools.
I then used the .svg file in the src attribute of the img tag, as described in this question.
Unfortunately, this does not show the image. Does the svg code of Google contain some code which doesn't make it render? Here is the link to the svg code.
Standalone external SVG must have a namespace declaration. They are XML files and the browser needs to know what type of XML they are (in this case an SVG).
You'll need to alter the first line of the SVG file to:
<svg xmlns="http://www.w3.org/2000/svg" width="786" height="459" overflow="hidden">
Try that.
I just started trying out the TideSDK to deploy a website to .exe and .app, which for the most part is fantastic.
The problem that I'm currently coming across is that all my CSS styles are written in .less styles utilizing the less.js framework. Inside of here, I have custom font-faces declared, and when deployed to a standard web browser, they apply fine to all the elements that use them.
When deployed through Tide, it doesn't seem to stick unless I take all my styling out of .less style sheets and put them back into regular .CSS files, which leads me to believe that there is some sort of compile time change that Tide is using internally when deployed the actual view of the application.
I have no idea how to go about fixing this. As a note, I'm not getting any
[Error] Error finding
errors from the Tide console, which leads me to believe that the .svg's are being found, just not applied.
UPDATE:
It seems I was using wrong syntax in the src: url('...'), so the CSS in the .less file was actually failing silently. I'm getting a pretty strange [Error] Error finding... file for the .svg now. The URL that is inside this line of CSS is being prepended by app: 3 times.
After several hours of looking at this problem, I eventually have figured it out. Couple of things to note when you are using the combination of these frameworks:
less.js spits out really odd path directories when using
src: url('...');
As a solution for this, you can use the import directive that is available to you in less and put the #font-face declarations inside of that .css style sheet. By importing a plain .css style sheet, you are telling less.js to treat it as regular .css, and the muxed url that gets spit out won't happen.
#import "../css/style.css";
After putting the import directive and confirming that the SVG was indeed being generated under Resources - Fonts in the Chrome inspector, I proceeded to take a look at the SVG file itself to determine if there was something wrong in the CSS naming conventions for the SVG file. According to this answer, and the blog post within it, your SVG name should be using:
font-family
value in the naming scheme from the SVG meta data
src: url('YourSVGFont.svg#Silkscreen') format('svg');
when in fact, you should be using the font id, at least that was the solution in my case:
src: url('YourSVGFont.svg#slkscrb') format('svg');
This is the image embedded in the blog post so that you can see what I'm talking about, and see where in the SVG meta data these two names are placed.
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');