So I wrote some text in Figma and added a stroke to it. After I exported it as an SVG file, only the stroke remained and the text(which is white) doesn't appear with it. How do I fix this so the svg I export will have the stroke and the text?
https://imgur.com/a/k6RAB2U
heres the link to the png version which works but has a lower resolution
I hope to be able to get the text in my svg file along with the stroke as well
I had a similar issue - in my case the font wasn't installed on the machine I was running on (using Inkscape). The exportef svg referred to the right font, but no conversion could be done.
If that's not the case, open the svg in your favorite editor and see what is being output - that should help with debugging the problem
Related
I have used opencv to read png files (with no background) and convert them into pygame surface. Here are the two examples of how I did it:
Method 1:
character=pygame.image.load("character.png")
Method 2:
CharacterImage=cv2.imread("character.png")
CharacterImage=convertToRGB(CharacterImage,CharSize,CharSize)
#charSize is desired character size (for example: 50)
#I have created a user defined function as pygame renders in RGB whereas cv2 renders in BGR image format.
CharacterActions.append(rotate(pygame.surfarray.make_surface(CharacterImage),charrot))
#charrot is rotation angle
I understand that I could manually resize images and then use the first method to get the transparent background image. But I want to understand if its possible to obtain the same via second method? I don't want to manually edit so many images resizing them and that's why I want to know if there's a way for the same.
Thanks in Advance
On the images you load using your Method 1 (pygame.image.load()), you should use pygame.transform.scale() and pygame.transform.rotate() to manipulate the loaded image.
To maintain the transparency, you need to keep the alpa of the image you are loading. To do that you need to use .convert_alpha() on the resulting image. You can do that after or before the transform.
For each of these commands I have linked them to the documentation, just click on them so you can read it.
I'm playing around with custom cursors but every time I try it, it comes out pixelated, I made a ring asset to show how bad it is.
Here is the cursor image file.
cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/272259/circle.png), auto;
It's 22px x 22px, about the size of the default cursor, but it renders really jagged.
Here's a codepen demo to illustrate the bug.
Any ideas?
Thank you,
:)
In both IE and Edge only .cur files are supported, see https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx. (Edge supports other formats but not the interaction point definition.) The .cur file allows you to define the interaction point. Just google for ".cur editor" and choose the editor that suits you to create a .cur file.
Does anyone know why my Win Phone 8 app tile doesn't show the icon I set? This is what I get (and yes, am am sure that's not my app's icon):
This is what I have so far and I ran out of ideas of what can be wrong:
The small icon is a png of 110x110
The medium icon is a png of 202x202
Both images have the build Type = Content
Both images have the copy to output property = Copy if newer
The application icon is the same as the small icon and it shows alright in the program list.
Here is a part of my app's manifest:
<TemplateIconic>
<SmallImageURI IsRelative="true" IsResource="false">Assets\Icons\AppIcon_small.png</SmallImageURI>
<Count>0</Count>
<IconImageURI IsRelative="true" IsResource="false">Assets\Icons\AppIcon_medium.png</IconImageURI>
<Title>
</Title>
<Message>
</Message>
<BackgroundColor>
</BackgroundColor>
<HasLarge>false</HasLarge>
<LargeContent1>
</LargeContent1>
<LargeContent2>
</LargeContent2>
<LargeContent3>
</LargeContent3>
<DeviceLockImageURI IsRelative="true" IsResource="false">
</DeviceLockImageURI>
</TemplateIconic>
If you use TemplateIconic tile the images need to be transparent icons as outlined in Iconic Tile template for Windows Phone 8 because it is just going to end up being a white icon inside a tile. Your image appears as a white square because it does not have any transparency. With the images you have, you would want to use the TemplateFlip tiles and adjust the size of your tiles accordingly.
I had the same problem.
After a lot of brainstorming I tried this and woah it worked!
Check if the image you are setting has a white (or other) background color. If it has, remove the background from the image using Photoshop(Tool: magic eraser) and keep the background transparent.
Replace this transparent background image and it will show up in emulator!
Hope this works at ur end too! :)
Did you look at the manifest file? You can choose the images in that file. I mean using the UI in the studio, open the manifest file and choose the image.
According to Iconic Tile sizing info in Iconic Tile template for Windows Phone 8, both small icon and medium icon must be design with transparent background.
The small icon is a png of 70x110
The medium icon is a png of 130x202
If you need to set the background color, set the BackgroundColor in WMAppManifest.xml as follow.
<BackgroundColor>[hex ARGB format color]</BackgroundColor>
I work with Xamarin.Forms (Shared) for my WP-app and also had problems to implement the Tile in the WP-part of my project.
To set the background to transparent to the tile image have done the job.
But I have used images with 158x158 and 336x336 what also works and allows to use the standard-icon (in a higher resolution) what - I think - most users want to do.
I have created a short description for all visitors, who use XF for WP-development (including app-icon, splash-screen and Tile).
How to add app-icon, splash-screen and Tile in a WP 8.0 XF-project
I have the following Emacs Muse snippet:
<src lang="cc">
int a = 1;
</src>
This "htmlizes" the code within the angle brackets (adding color to keywords, etc.). The problem is that my font faces are optimized for a black Emacs background. Does anyone know how to tell Muse to output the code over a black background?
Thanks.
This is really not problem of Muse, but of htmlize package. It looks for face-background property of given face, so you need to check, which background is set for default face and for font-lock-* faces... Please, check also htmlize's version
I'm working on a page that will allow a webmaster to add styles to their twitter feed. Several of these styles use transparency in their display. I want to create a list of images for them to choose from. Currently I am taking screenshots on a checked background such as this:
But that isn't really what I want.
Is their some method of capturing an image of an HTML element, and maintaining the transparency?
EDIT: I'm just digging into this, so I'm coming across new topics, such as HTML5 Canvas, and -moz-element. Is it possible to set a canvas background to the html element using -moz-element, then extract the image data from the canvas? I'm going to try this unless someone who's 'been there done that' heads me off.
EDIT: The -moz-element and canvas was a deadend. -moz-element will set the item as a background, but will not allow you to save background image. And canvas doesn't save its background, even when the background is a normal image.
It requires a little bit of work, but it is doable, as long as it's HTML you're laying out. You can't recover the transparency of markup in pages you've downloaded without saving those pages and editing them locally. By rendering the HTML elements multiple times, on different background colors, the opacity can be derived using an image editor. You're going to need a decent image editor, I use GIMP.
Render the elements you want to save three times, on a black, a white and a neutral gray background(#888).
Using a screen capture program, capture those displays and crop them to the exact same areas.
In GIMP open those images as layers and order them black, white and gray, top to bottom.
Set the top, black layer to difference mode. This will give a grayscale difference between the black and white layers.
Merge down the top layer. This will leave us with two layers. The gray background layer and the grayscale difference. Invert the colors of the difference layer, and copy it to the clipboard.
Add a layer mask to the gray background layer and paste the clipboard into the layer mask.
Delete the grayscale layer and apply the layer mask on the gray background layer. That should leave one layer with opacity similar to the original.
The opacity is off by a bit, but if we duplicate the layer and merge it with itself, it's right in the ballpark.
It's probably not pixel perfect, but it is proof of concept. Opacity of HTML markup can be captured.
Using Puppeteer makes this much easier to do. It runs a web-page in-memory.
Start a local fileserver - python -m SimpleHTTPServer 8080
Then this script should do the trick:
const puppeteer = require('puppeteer')
;(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://localhost:8080/index.html', {
waitUntil: 'networkidle0'
})
const elements = await page.$('body')
await page.evaluate(() => (document.body.style.background = 'transparent'))
await elements.screenshot({ path: 'myImg.png', omitBackground: true })
await browser.close()
})()
the docs for .screenshot() are here.
What you'd need is a web browser that can render into an image buffer in memory instead of the screen.
My guess is that all browsers can do this (that should be part of the renderers) but I'm not aware of any browser where you can access this function, at least not from JavaScript.
If you download the WebKit sources, there should be test cases which do something like that :-/
No, there's no software that will allow you to take screenshots and preserve the transparency of individual visual elements as a transparent spot in the image, because that's not how a screenshot works - screenshots are WYSIWYG, by definition, all elements in your screenshot will always have a non-transparent background.
I think your best bet here is to recreate the desired portion as an image, where you can control the transparency normally. It's not the best solution, but if you're doing this a lot with the same kinds of things, it will be much faster for you rather than cropping/editing screenshots.