While I have read in the Microsoft guidelines that we should prefer SVG images over raster images I cannot seem to find anywhere how to use them for the logos in the manifest. Does anyone know if this possible?
As Hans already mentioned only PNG and JPEG images are supported. Here's official documentation on the matter containing complete info on image sizes as well.
Related
I googled and even asked chatGPT but I'm unable to find a solution and hope to get some guidance here.
First I've to mention that I'm not a programmer but rather a beginner.
Following a short description of what I'm trying to achive and what I've done so far.
I gather data and create a circular visualization using Circos which produces SVG
and PNG images.
(unfortunately the PNG doesn't give me the option of searching for
text an make replaecments), nevertheless I can use them to sucessfuly produce a
MPEG movie using FFmpeg. Therefore I need to use the SVG output to apply the
desired changes.
So I tried to use CairoSVG to render the SVG file to a PNG image but it does not
render emojis by default because the are not part of the SVG specification and
CairoSVG only supports features defined in the SVG specification. The Emojis are
stored as Unicode characters and are not natively supported in SVG
Next I tried to use PIL (Python Imaging Library) as it provides support for Unicode
characters, including emojis, when converting images to and from various formats.
Unfortunately PIL does not have native support for converting SVG files to PNG and
it seems that PIL is primarily designed for creating and manipulating images in a
variety of formats, but does not have built-in support for reading or converting
SVG files.
So now my questions are:
Would FFmpeg give me the desired results, if I compile it using the --enable-
librsvg option so it can convert a sequence of SVG images to a video but i'm not
sure if it supports emojis rendered correctly and want to spare me the hassle as
I'm pretty sure to struggle compiling it on my Mac running Ventura?
Are the maybe other ways or posibilities to solve that problem?
Many thanks in advance for your help or any hint :-)
Have all a nice weekend and take care
Regards,
Deekee
NB: an example of the circular visualization can be found here animated graph and the static version annotated graph
Problem solved, I used the html2image Python module which converts the SVG (including embedded Emoji's) nicely to a PNG image an then use those images to create a MPG4 video using FFmpeg.
Does anyone have experience or insights into how to convert SVG to PNG using ImageMagick.NET where the SVG has custom embedded fonts?
I've seen similar posts about this, but I'm specifically interested in ImageMagick.net and I would like to avoid calling anything from command line. I currently use Batik, but I want to move this to Azure and I don't want to go through starting the JVM so that the JAR file can be executed.
Note additionally, my problem is that I am getting the SVG from another party and most fonts are not freely available, so I can't just pre-install all potential fonts.
Many thanks for any insight.
I don't know anything about azure platform, but I can share some insight on the SVG process within ImageMagick. This is more of a long-winded comment than an answer
ImageMagick (of which Magick.net sets on top of) performs tasks on raster images, so any vector input must be "decoded" into a raster image before any additional work be be done. For SVG images, I'm aware of three ways ImageMagick can render vector graphics into authenticated pixels.
Use a primitive internal MSVG coder to draw each shape.
Pass the rendering work to librsvg if compiled with delegate library support. (Usually on *NIX systems)
Call an external command-line application. Identical to the suggestions referenced in the links you provided.
If I would map it out, I would imagine it would look something like this.
SVG Fonts with MSVG (option #1)
I believe this is the option your asking about as it would be the default configuration for must ImageMagick installs. For a font to be rendered, the typeface must be found on the system, and supported by freetype (.ttf or .otf files). Embedded fonts are usually base64 ttf files attached inline under the #font-face CSS at-rule. If this is true, you should be able to preprocess the document, extract the font-file to a local/temporary filesystem, and assign it with MagickReadSettings.FontFamily before reading the SVG document. Although I'm not sure if this would work with multiple fonts.
SVG Fonts with RSVG (option #2)
The librsvg offers a lot more support for SVG specs then the internal renderer, but also enforces more restricted approach for external resources. There's also an open issue with adding support to #font-face, so you might be forced to do option #1 anyway.
External Command-line (option #3)
This would be your best option. ImageMagick's delegate.xml file can be altered to call other utilities. Inkscape, for example, can be called by ImageMagick with the following rule..
<delegate decode="svg" command="inkscape.exe -e %o %i"/>
Although I'm not sure if inkscape is a good example as support for CSS fonts are still listed on a wishlist.
TL;DR
... convert SVG to PNG using ImageMagick.NET where the SVG has custom embedded fonts?
All-n-all, it boils down to the right tool for the right job. If your only use-case is converting SVG+CSS to PNG, and you have no additional raster manipulation tasks, a direct utility like batik is more appropriate than ImageMagick. Like it or not, installing a JRE to execute a JAR file might be the best option. Magick.net by itself doesn't meet your requirements.
I'm not sure if this is the right place to ask, but what technology/service is used to render the images at cushionsource.com ?
I mean what do they use to "dress" the pillow in 3D with those color swatches
I researched and found Amplience does a similar thing, but those Cushion Source look so much better and realistic (I also couldnt find patterned examples from the Amplience demo, only solid color rendering, but not stripes or florals)
Perhaps Cushion Source is using Amplience? and it's only the quality of the SVG file that matters? Or what else are they using?
base image
rendered image (based on selected variant[fabric])
This is Adobe Scene 7.
Support for 3d objects is extensive, you can read more about it in their official documentation.
Scene7 became highly regarded for rich media and has now evolved into Adobe Dynamic Media under the Experience Manager suite.
A little late but hope this helps you all the same.
I am building a small app with nodejs/expressjs. I made an upload wizard for GIF and JPG images... Depend on images' extension I will classify them into Animated Images or Normal Images...
GIF --> Animated Images
JPG --> Normal Images
But I got a problem, images in JPG can be animated. So how can I detect animated JPG images?
Demo animated JPG: http://picforest.net/pic/0237bbca82954e74902a4afba66df221
I think you can find out that information using EXIF information.
For instance, here's the EXIF info of the image that you have provided:
http://regex.info/exif.cgi?imgurl=http%3A%2F%2Fcdn.picforest.net%2Fupload%2F2015%2F17%2F0237bbca82954e74902a4afba66df221.jpg
It says that it's a GIF image.
There's a node module for exif called https://github.com/gomfunkel/node-exif. Perhaps that may help you out
As it was pointed in comments, there is no such thing as animated JPEGs (except this obscure proposal). Unfortunately this not mean that you can rely on image extension. Extension is just part of file name, it suggest file type, but not determines it. For example image you shared has .jpg extension, but in reality it's GIF and every major browser will treat it as one. In order to detect animated image you must inspect it's content. For example in case of GIF images you could check if first 6 bytes of file is GIF89a or GIF87a, but doing so you will know only that image is a GIF, not that image is an animated GIF. If you want to detect only animated GIFs you must check if they have multiple Image Descriptor Blocks, and it's a little bit more complicated.
It's also worth to mention that currently there are 3 supported by browsers image formats which could contain animation:
GIF - it's rather obvious;
APNG - it's supported by Firefox and Safari, other browsers displays these images as ordinary PNGs;
SVG - SMIL animations are supported by all major browsers except IE and Edge, and there are also CSS and ECMAScript animations.
If you want to detect first two types of animation you can use my node.js library - is-animated, it's rather simple to use:
const isAnimated = require('is-animated');
isAnimated(someBuffer); // -> true/false
Unfortunately currently it doesn't support detecting animated SVGs.
How to make thumbnail images for custom Liferay Layouts? If anyone has done it using any open-source software, please help!
In Liferay 6.1 source folder /liferay-portal-src-6.1.0-ce-ga1/portal-web/docroot/layouttpl there is a zip file called thumbnails.zip which in turn contains thumbnails.psd, which contains thumbnail images for all the bundled layout templates. As for an open-source image image editing software, there is Gimp. Unfortunately, I didn't have much luck opening the mentioned file with it - the glossy overlay lost it alpha value and the large background rectangles seemingly lost their gradients and are all solidly colored. You could try Paint.net as well, which also stands in high regard among free image editing software.
The latest version of liferay docs containing any mention of layout templates thumbnails are for Liferay 6.0 series and you can find it here. There is also an empty png layout thumbnail template with proper background gradient, but you would have to make your own gloss over the little light rectangles as well as make the corners round...
All in all, you could also try to make the thumbnails from scratch, give them a more unique look. The image from Liferay docs should give you the idea of what it should like to still look nice next to bundled layouts' thumbnails. I'd just suggest to try and use vector image editing software. The bundled thumbnails all look simple enough to draw them with vectors, which would give you more flexibility and ability to change your mind anytime about details without having to draw everything all over again.
And that's for a 121x121 px image...