Im trying to use SVG-Graphics in a CHM-File. The CHM is created by HTML Help Worshop. Unfortunately the svg files dont show in my compiled chm... (Everything works fine in Html)
I already added my SVG to the Files section of my hhp. But still nothing.
Has anyone succeeded in using SVG Files in CHM created with Html Help Workshop?
Any Help is really appreciated!
Regards
Christian
(This topic is only related to SVG. Bitmaps work just fine...)
HTML Help Viewer renders topics in the IE 7 standards mode for compatibility reasons (see these answers), and IE doesn't support SVG until v. 9.
Possible solutions:
Change the FEATURE_BROWSER_EMULATION registry flag to make HTML Help Viewer use the IE 9 mode.
Use some JavaScript SVG libraries to render SVG. (Didn't try it though; just an idea.)
Related
I'm using vecta.io to create SVG images for my website, some of which include embedded fonts. I embed these simply via an <img src="this.svg"> tag.
This works as needed on Chrome, Firefox, Internet Explorer - but not Microsoft Edge.
Specifically on Edge, the embedded font gets replaced by Times New Roman when using the <img> tag - but not when using the <object> tag for inserting the SVG. I wish to use the image tag for simplicity and ideally avoid fallbacks - is there a way to solve this on Edge?
Below is an example of the problem - an SVG with embedded fonts inserted both via image tag and object tag: https://test123new.smoolis.com/screen/page/test
It seems to be a known issue of Edge Legacy. I found a similar thread and others have reported the issue. You could also provide your feedback in Edge Legacy.
As a workaround for now, if you don't want to use <object> tag, I think you can only save the picture as a png file and use png pic in Edge Legacy.
I'm trying to use Flutter SVG dependency, i put in the svg in assets, set in pubspec.yaml, and set in my widget, but, the svg load with black container
I've already tried change the svg, and the another svg works fine, but the other not...
final Widget svg = SvgPicture.asset(assetName, semanticsLabel: 'Acme Logo');
the svg in flutter
Here the svg
My expected response was colored svg like the link in codepen, but i got this
This is probably happened because of the corrupted SVG files from the internet. I faced this problem earlier and tried many ways to solve it. But finally, I solved it with the help of this software, svgcleaner.
Download the application into your OS, from here
After installation,
import your SVG.
Click run.
Success! Here you can see your SVGs' cleaned successfully.
After cleaning, you can grab those SVG files from the output folder location and add those files into your flutter app without seeing any black coloured SVG.
It works perfectly fine like this.
I think I am late but this might just help someone. Just make all the styles in your svg image use inline styling otherwise all colors and styling won't be rendered as the tag is not readable by the SvgPicture.
I tried this SVG asset with the latest version of jovial_svg, and it works great! Here's the result:
This version of jovial_svg should be released in a couple of days, but for now it's 1.1.4-rc.4.
(This asset helped me flesh out stylesheet support - thanks!)
I found this site it solved my problem with the svg file that was out of color.
https://iconly.io/tools/svg-cleaner
use this configuration in illustrator before you add it to your project.
https://user-images.githubusercontent.com/2842459/62599914-91de9c00-b8fe-11e9-8fb7-4af57d5100f7.png
If You don't have solution try to convert your image from svg to png and use:
Image.asset('assets/images/image.png',)
Some SVG images uses style tag and if you try to load such image using flutter_svg, image won't render as expected. Currently flutter_svg supports styling through inline styles only and not the style tag that some of SVG files may contain (in my case, I exported image from Adobe XD and it has all styles in tag). When you try to load such SVG images, you will get below error:
======== Exception caught by SVG =================================================================== The following UnimplementedError was thrown in parseSvgElement: The
element is not implemented in this library.
Style elements are not supported by this library and the requested SVG
may not render as intended.
If possible, ensure the SVG uses inline styles and/or attributes
(which are supported), or use a preprocessing utility such as
svgcleaner to inline the styles for you.
This error mentions to use inline style instead of style tag, you can use svgcleaner (as mentioned in #Alif's answer) or similar utility to convert SVG file with inline styling.
For more detials, refer this link to check SVG compatibility with flutter_svg and handling other use-cases
try this:
Container(
child: SvgPicture.asset(
'assets/images/image.svg',
fit: BoxFit.contain,
),
)
Where can I get some code to implement rendering of SVG (specifically SVG Markers) in C#?
I have been using SharpVectorsReloaded. But the code to render SVG Markers is incomplete and buggy. I have been trying to debug and work through the issues but I would love another code source (C# or Java) so that I can get some ideas into what is wrong/missing from the SharpVectorsReloaded implementation. Would you also be able to specifically point to where in the code the SVG Marker rendering is taking place?
Maybe Batik's or Webkit's source code can help you? I know Batik is one of the most complete SVG implementations and Webkit is not bad either. The source of the Canvg library can also help..
Take a look to this open source https://github.com/vvvv/SVG, it has the definitions you're looking for.
Does IE6 support css-sprites?
Yes IE 6 supports sprites but doesn't support 24 bit PNG transparency.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
You can also use Glue http://gluecss.com/
It's an open-source command line tool to generate sprites.
CSS sprites is a general solution using backround-position, which is avaible even in IE5.
A good tutorial about them is located here: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
I have encountered the IE6 CSS sprites problem myself - I blogged it here:
There's a really easy fix - I quote myself here...
Luckily, the solution wasn't too bad. Internet Explorers passim seem to ignore overflow:hidden when a child element is set to position:relative. Not good news... but the solution is easy - set the element with overflow:hidden to also be position:relative and then change the position:relative declaration on the child to be position:absolute... the jobs a goodun.
The full details can be found on that link.
Yes. If you're using PNGs though you should consider a few things. Here is a decent summary of IE 6 PNG issues:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Yes.
CSS sprites is just a technique to use offset on background images to display different parts of the same image in different elements.
I use CSS sprites on for example the main menu on the website of the company I work for, and the flags on my own web site. I started using it before it was even called CSS sprites...
Browsers which support background-position property will support CSS sprites also.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Please take a look at the following questions also
CSS Sprites images rendered with bad quality in IE
CSS Sprite Help
You could just use an online sprites generator. There are so many of them available for free and most of them support all browsers.
Sprites can work perfectly in ie6. But a png image will not work, so use a gif. If you process a gif with Smush.it to losslessly remove overhead, you might get a file size smaller than the corresponding png.
I would like to know about the basic compatibility issues in the major browsers (Internet Explorer, Chrome) when compared to Mozilla Firefox, such as:
Text Alignment
Color
Font Size
Tool Tips
Paragraph Alignment
Text Bold
Shapes other than images
Line overlap
Table visibility
Thank you!
This is a really vague question, but I find Quirks Mode extremely helpful with all aspects of browser compatibility. Also look at A List Apart.
This is a pain big enough that the smart people at Yahoo have written several CSS normalizing components for their excellent YUI library. Please see Reset CSS (developer.yahoo.com/yui/reset), Fonts CSS, Base CSS, and Grids CSS components.