Long ago I searched on Internet for a SVG image plugin and found that one, which is almost broken, outdated and thus unusable. Is there any other plugin that I might miss that allows to show SVG images and works fine with recent Nativescript version?
For anyone still struggling with this, there is another route you could take. What ended up doing was converting my svg files into a font file (.tff). My svg files were simple, so I'm not sure if this will work for every case, but at least it works for using icons. It's really easy to convert svg files to a .ttf file. I used this online tool converter, then I added the file into my nativescript app/fonts folder. Now I can use a label like this to display the svg files:
<label
style="font-family: yourFontFileName;"
text="A" //This will show the icon mapping to the letter 'A'
></label>
It's also worth noting that since it's a font, you can change stroke color, and size.
Note: Android uses the file name as the font name, while IOS has its own font name. To find the font name you can just open your .ttf file, and it should open a window showing the letters (icons) and the font name as the title
There is an updated fork from teammaestro
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:svg="#teammaestro/nativescript-svg" loaded="pageLoaded">
<StackLayout>
<svg:SVGImage src="~/image/nativescript.svg" height="100" />
<svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />
<svg:SVGImage src="res://somesvg" height="200" />
</StackLayout>
</Page>
Related
In my login UI, I have a footer image, which is showing perfectly in small devices. But on big screen devices (mainly on iPad) it is not showing fully.
I tried all Aspect property of Image, but not worked.
Screenshot:
I try a lot to fix this but didn't get a solution.
Attaching the LoginPage.xaml file with this question. Please suggest a solution for this issue. :)
Make sure (in the iOS project -> Assets) your image set has 3 different sizes xxx.png,xxx.png#2x and xxx.png#3x .
Which image will be used for your app? That depends on the device your app is viewed on. Higher resolution devices (larger and newer devices) have more pixels on their screens. Thus they need higher resolution images to display properly without any blurring.
If you don’t supply the higher resolution (#2x or #3x) images, your app will automatically try to scale the #1x image up. This is not good and can result in a distorted or blurry image!
Based on the file you linked in the comments, I think it would suffice to remove the bottom StackLayout wrapping the Image, and instead put Grid.Row="1" & VerticalOptions="End" to the bottom Image.
Please update your question with the relevant code to make the question and answers more helpful to others.
Remove latest StackLayout with image and add it after StackLayout with Grid.Row="1" like this
<Grid Grid.Row="1"
BackgroundColor="#c0eefb">
<Image
Source="ic_footer_image_xx.png"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"/>
</Grid>
I am using VS2013, Windows 8.1 and developing a windows store app.
Im creating a simple contacts - listview, that displays the contact details along with contact image within an ellipse. When I click on the listview item, I want to display the contact details on right side of the page. Now the issue I am facing is, I am not able to fit the contact image to the right size on the ellipse on the right side pane.
I am able to achieve it in my list view since its an smaller ellipse.
Important: I do not want the image to look stretched/Zoomed in /Zoomed out. It should exactly look like how it appears within the list view. (For list view , I have used Ellipse.Fill along with Imagebrush, but relatively smaller sized ellipse)
What I tried so far:
Ellipse.Fill property which paints the image to size, but the image looks stretched.
I tried setting "Stretch" property within the image tag within ellipse, but did not work.
I tried Image.clip, but I do not have "EllipseGeometry" option, instead only RectangleGeometry.
Lastly I created an image that has a transparent center and I place this frame over the contact image like a mask. This works well on some resolutions. But when some other resolution, the contact images which are binded from backend, go beyond the frame, although I set "MaxHeight" or "Height" properties.
I want to do it the right way, since I feel adding an image mask might not be a great way to achieve this. Please help!
I tried this for listview, n works fine, But the same code for right pane looks stretched (I have tried removing stretch attirbute, or tried other options like Stretch ="None" /"Uniform" etc )
I have attached screenshot.
Since code isn't clearly mentioned, you can do it with both Ellipse and Border. Here's the code snippet
<!--With Ellipse-->
<Ellipse Height="200"
Width="200">
<Ellipse.Fill>
<ImageBrush Stretch="Uniform"
ImageSource="Assets/profile.png" />
</Ellipse.Fill>
</Ellipse>
<!--With Border-->
<Border Height="200"
Width="200"
CornerRadius="150">
<Border.Background>
<ImageBrush Stretch="Uniform"
ImageSource="Assets/profile.png" />
</Border.Background>
</Border>
Here's the result
The properties "AlignmentX AlignmentY" within ImageBrush solved my issue.
If your image has portrait orientation, then you can use Stretch, AlignmentX, AlignmentY properties of ImageBrush like this to achieve best preview result
<Border CornerRadius="20" BorderThickness="1" BorderBrush="DarkGoldenrod">
<Ellipse Width="40" Height="40">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding PractitionerPhoto}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Top" />
</Ellipse.Fill>
</Ellipse>
</Border>
I want to embed some SVG into SVG.
Therefor I want to use the <image> element since I want to keep my SVG separated.
But when I include my SVG like that:
<image xlink:href="svgs/munitionsmangel.svg" width="20" height="20" x="120" y="70" />
It works, but does not scale the SVG up when I zoom with my browser, it just stays small.
But when I embed just the same SVG file as a symbol and include it like that:
<use xlink:href="#munitionsmangel" width="20" height="20" x="80" y="70" />
it just scales up like a charm.
What is the problem here?
Edit: Seems like this is a bug with Firefox, in the current version 21
Chrome scales up the image as well...
Even more strange, if I include a raster image with image, both Firefox and Chrome scale it...
Edit 2: Even IE 9 has the desired behaviour, although its rendering of background colors is a bit strange, so its only Firefox which sucks
Since this really seems like a bug in Firefox, I will use the <use />-tag instead, maybe in combination with XMLHttpRequest to insert the <symbol /> dynamically.
Or even only XMLHttpRequest with inserting the node directly.
I cannot think of a better solution, so if there is really a better answer, just post it!
I am trying to create icons in Microsoft Expression Design, but I want to add the system resource colors like the phone background and foreground so that the icons change color when the user changes the theme. Does anyone know how to specify the windows phone system colors in Expression Design, or how to import them?
Thanks
This is a great blog post that I've used before which goes step-by-step into applying the System themes into images (which should be white.. but It'll get into the nitty-gritty details!)
Using an image as a mask so that WP7 theme’s are honoured
For example, here's how you can do it using a Rectangle and OpacityMask:
<Rectangle Fill="Black" Height="48" Width="48">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/MyProject;component/Images/Dark/appbar.add.rest.png" />
</Rectangle.OpacityMask>
</Rectangle>
Note that the Height & Width are set explicitly to the Width & Height of my ImageSource. This fixes the stretching issue that will occur if you don't do this.
Anything I tried failed so far to get Firefox to underline some text.
According to Google-results this issue is known and documented for more than five years ... that just can't be true ... what is going on?
Someone knows any consitently working workaround or maybe even a reason as to why they didn't fix it yet!? ... I am very curious about that
Underlines on text in SVG, as well as other text decoration, is not supported in Firefox yet, that is true. (Bug 317196 attests to that.) There is a plan to rework the SVG text layout code over the next few months, the result of which should be (among other things) underlines working.
In the meantime, if you really need them (and cannot draw them manually with a <line>, because for example you don't know the text metrics), you could use a <foreignObject> to include some HTML content with underlines.
In my Firefox, a ForeignObject text within an SVG gets perfectly underlined if I include it in the right tags:
<html:u>blub</html:u>
... having declared html as a namespace in the svg, sample code looks like this:
<div style="border:solid black 2px;">
<svg:svg xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
width="300" height="50" >
<foreignObject width="80" height="50">
<html:u>blub</html:u>
</foreignObject>
</svg:svg>
</div>
Would that be a solution for you?