me and my team are trying to put some .svg icons in our UWP win10 application (target and min version are Windows 10 Fall Creators update).
In my resource file I defined my SvgImageSource as following:
<SvgImageSource x:Key="PencilIcon" UriSource="Images/DeviceMenu/Icon_EditMode_grey.svg" />
And I then proceed to use this image source in my component:
<Image Source="{StaticResource PencilIcon}" />
I tried few different svgs and they all render with the right shape, but are all black (first one is the pencil):
The original svg looks like this:
Here is the source code of the SVG
I tried adjusting Stretch, Width, Height and so on but I just can't seem to get this to work.
UWP has no clue what css styles are.
In my case there was this:
<style
type="text/css"
id="style2">
.st0{fill:#996459;}
.st1{fill:#FFFFFF;}
.st2{fill:#B4B6BC;}
.st3{fill:#5C546A;}
.st4{fill:#868491;}
.st5{fill:#0F4499;}
</style>
To fix this for UWP, find every class="..." and manually apply the style.
This is a known problem of Adobe Illustrator, try playing with its SVG export settings.
If illustrator
Use Styling: "Presentation Attributes"
If you use illustrator then try to change styling. It should be something like Style Attributes.
UWP just partially supports SVG Ver 1.1 specification (see SVG Support)
And it doesn't support css-like styles.
See image
You can play with export settings of Adobe Illustrator for export image : AI export Settings
Or fix it manually: See image
Or with my tool:
Visual Studio extension at Marketplace.
Desktop version at Github releases
This tool just inlines css styles directly to the svg elements.
Related
<Drawer some_styles>
<View >
<Hamburger active={this.state.menuActive}
onPress={this._handleMenuButtonPress}/>
</View>
</Drawer>
I have to use .svg image as icon of hamburger instead of predefined icon.How to set our own image to hamburger. Thanks in advance.
I have used this article to help me include custom icons. I will briefly summarise the steps:
Install react-native-vector-icons, this is a library which allows you to add custom icons alongside their standard built-in icons (which are already great btw).
Convert your SVG icon(s) to a font (.tff file), Fontello or Icomoon are online tools supported by rn-vector-icons which allow you to do just that
Add that font to your project
Create a small config file where you tell rn-vector-icons which font needs to be linked
We are building a web app where the user can make a design by using fabric.js and at the end he should receive a pdf file with his work.
At first, we tried to use JSPDF because it was prefered to have a cliente-side solution. However by doing pdf.addImage(canvas.toDataURL(),...) we are rasterizing the design.
In second place, we tried server side solution using WKHTMLTOPDF, sending canvas.toSVG(), but there are some issues with fonts and shapes rendering.
The designs are complex as they can have text, shapes, images and svg.
We also tried INKSCAPE (inkscape --without-gui --export-pdf ...), MPDF and MUPDF without good results. IMAGEMAGICK is not a solution has it also rasterize the design.
The main goal is to get a vector pdf, where it's possible to increase size and where the elements of the design are selectable, and if possible that pdf should be ready to print (300 dpi and cmyk)
Yes its possible using TCPDF library.
Please check this ImageSVG api for more information for converting SVG to PDF.
https://tcpdf.org/examples/example_058/
Export the canvas to svg and use pdflib to make the pdf.
You can find an exemple here:https://www.pdflib.com/pdflib-cookbook/graphics/starter-svg/
I have added many font-family and style into my asset folder in React-Native project. It's working fine in simulator, emulator, and iOS device. But some font won't work and not display in Android device.
I have try with react-native link and check the asset folder in Android app directory, nothing missing.
Anyone help please.
I might have a solution for this. I had the same problem, the fonts were visible in my emulator, the font files are located under 'android/src/main/assets/fonts' and yet it wasn't visible on my physical android device (Huawei Honor 8X).
I found out that the problem was with my physical device's Font settings. To fix this, on your phone, go to
Settings -> Display -> Text Style -> Default
Settings screen : Go to Display
Display settings : Look for Text Style, Make sure it is set to default as seen in the pic
Select Default here : Now your custom app fonts should work
Please Note that these settings might differ as per your device. I've mentioned the steps for my phone.
Always use the default Text Style to render custom fonts in your app.
Nowadays, phones like the OnePlus etc. have their own custom fonts and I think this is interfering with custom fonts defined in Applications.
Hope this helps.
Following this article worked for me. The name of the font file name is important to get it working on both platforms.
I had multiple font files with different weights (Circular Std Bold, Circular Std Medium etc..) for these to work on android I dynamically changed the font family style to this name to change the weight.
The font weight style on android didn't work for me.
the problem is with devices that have custom font style like huawei devices. I hope there be a solution for this to not force the user to change it's device font style because of our app.
My font family changes when I connect to my android device but I finally figured out how to fix it. If font weight is set then it changes the font on my device to its default font. After I removed font weight my android devices default font isn't applied anymore.
fontFamily its not work in inlinstyle you must change from
<Text style={{fontFamily:'SantPro'}} />
to
Text style={styles.text}
const styles = StyleSheet.create({
text: {
fontFamily:'SantPro',
},
})
In Android, it is quite easy to set a image placeholder for development purposes in an imageview.
All one would do is use the tools:src for the placeholder image during development so you could see it in your layout design preview and your actual image you would put into your android:src
. Frequently, you don't set the android:src put would populate that imageview with images that you download off the internet once you connect your app to the net:
<ImageView
android:layout_width="28dp"
android:layout_height="28dp"
android:src=#drawable/activated_icon"
tools:src="#mipmap/white_activated_icon" />
In Xamarin, you have this to display images:
<Image Source="http://lorempixel.com/1920/1080/nature/3" />
Once the app connects, the image is downloaded from the internet and displayed. How do I put in a placeholder image for development purposes (similar to the way you would do it through tools:src in android) so I can see it within the layout design previews?
I'm assuming you want to achieve this with Xamarin Forms, as you referring to XAML in the question title.
Or possibly you are referring to the Xamarin Forms Previewer? In that case, disregard the following answer. You can only use local images in the Previewer as far as I can tell.
Answer in case the question is related to runtime Xamarin Forms
There is no standard option to do this in Xamarin Forms. Take a look at this example suggested by Stephane Delcroix from the Xamarin Forums. The important part of this approach is to stack 2 images on top of each other in a grid. 1 is the placeholder that is placed beneath the image that is being loaded, like this:
var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition());
grid.Children.Add (image);
grid.Children.Add (placeholderImage);
As an alternative option, WebImage of Xamarin Forms Labs allows an option for a DefaultImage, but I'm not sure if that shows immediately. See this class for the code of the Web Image. Keep in mind that Xamarin Forms Labs is no longer under active maintenance.
Of course you can also write a custom renderer. Maybe based on the Xamarin Forms Labs example.
I use FFImageLoading for this Case.
Just install the Nuget Package and Use the "CachedImage" in XAML.
<ff:CachedImage Source="your url" Placeholder="placeholder while loading"/>
You don´t need to download (and cache) the Image manually then. It will automatically displayed when the download is done.
You can use local files (from Resources or Drawable) and files from HTTP/HTTPS.
I am using the jetpack theme in my silverlight project. Everything is picking up the styles except I do not get the subtle text shadow effect that is visible on all the controls on the jetpack demo page.
Here is a screenshot - my project on the left, the demo site on the right.
Is there anything I have to do to enable the effect?
You have to use the label control in the toolkit.
Do this:
xmlns:label="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
then this
<label:Label>Icon</label:Label>