Problem
I am importing an SVG file into my Figma design file. The asset originally has a transparent background. After importing it into Figma, the background becomes black. I've used the asset elsewhere and I know it's transparent. I've searched the Figma help center, forums, and Stack Overflow, and cannot find any relevant information. I must be doing something wrong.
Background
I use Canva to create a lot of small, individual assets (like marketing assets and web assets). I created a design and exported it as an SVG (as I've done countless times). The asset in question is a graphic to be used in a hero section and it has a transparent background. I've already been using it in my actual code project and it looks as expected (the background is transparent.
However, I've been trying to use Figma to design my site, and I imported the asset so I could design my hero section. It imported almost everything correctly except the final layer. It imported the base layer by creating a rectangle item with its fill property as the base layer converted to an image.
This has caused to issues:
It's now pixelated, which defeats the whole purpose of using an SVG, and
The background is no longer transparent. It's no black.
What am I doing wrong?
Context
Here are some screenshots to provide context. The first screenshot shows the SVG viewed in VS Code and the second viewed in the browser. These demonstrate that the original asset does in fact have a transparent background. The second two show how it looks in the Figma editor.
If the fill is not specific it might turn the object background into black color. Try to set the fill:none.
Related
I want to evaluate Libgdx for my app. I want the following things to be possible with Libgdx:
The dynamic loading of images. (✔ Texture)
Cutting images. (✔ TextureRegion)
Support of the multiple screens. (✔ Screen)
Recognizing swinging to the right, left, up and down in a defined area. (✔ GestureDetector)
Nice to have:
Styling of buttons. (?)
Standard elements like lists, ScrollViews etc.(?)
SVG graphics rendering (?)
I am thinking about the three problems. I read that GestureDetector should be very slow (500ms) and that SVG graphics are not natively supported and rendered with extensions very slow.
My third concern is that I can't just style buttons the way I want them to, for example: enter image description here
I would like to know if my requirements can be solved with the LibGDX functions and if they are good and easy to use.
Thanks for your advice!
LibGDX comes with a sublibrary called Scene2D UI, which defines a bunch of standard UI widgets which can be styled with JSON. It comes with different Button classes and ScrollPane which are your ScrollView substitute.
Docs you might want for Scene2D UI:
https://github.com/libgdx/libgdx/wiki/Scene2d.ui For the widgets
https://github.com/libgdx/libgdx/wiki/Skin For styling the widgets
In regards to SVG rendering, best option is to render them to PNG files if you want to use LibGDX alone.
Also, you may want to look into TextureAtlas for managing all of your TextureRegions, as well as AssetManager for managing all the external resources in your app https://github.com/libgdx/libgdx/wiki/Managing-your-assets.
It's a good idea to compile all of your texture files into a single texture, so that not many textures have to be bound and unbound in OpenGL, so have a look at this https://github.com/crashinvaders/gdx-texture-packer-gui this will help you produce a TextureAtlas automatically.
I'm having trouble creating an SVG (for web use) from an illustrator file sent by the design agency. The SVG exported doesn't look like the same, specially because the affected areas are suppose to look like shadowed areas of human characters. The art created is quite complex and I'm not authorised to show it, but I'm just putting here one of the elements that replicates the issue.
original .ai file + exported .svg in this zip: http://we.tl/AdJPqFqQd1
I've also saved it in .eps and tried exporting, but it didn't make a difference
I'm looking for a solution that wouldn't be too hurtful considering that there are many elements in the original artwork like this shape and most of them have different colours and shapes.
I tried to access the CSS within the SVG but I couldn't manage to change the gradient.
Using Illustrator CC 2015 I've tried exporting with all the different options (unless I missed some special combination, which I do not believe)
Hopefully and with a lot of luck, I would like to find someone who came across this problem before and knows how to deal with it. If you could try it yourself, you would be aware of this issue and I would appreciate it very much. Thanks
This is my second question, and I’m hoping to resolve an issue that I haven’t found addressed, though I did search for an answer.
Links and screenshots to problem are below. Using Fireworks CS5, I have created an animated gif consisting of 3 states that loops 3 times. It is built on layers, with the 3 states sharing only a background border. They do not share the background (the background is grouped layer consisting of a red box with a clipping path of white, which seems to work in the first two states, but fails in the third state) itself, or any other element.
It is a tile ad for an html e-newsletter, and it works on some clients (gmail, for instance), but the final state does not render properly in other clients (mac mail, for instance). To add to the issue, the same file was rendering correctly in Mac Mail earlier. The gif works if I open it in a browser (usually), as well.
I thought that animated gifs were very stable across platforms except for problems with looping in Outlook 2007 and I've never had this issue before (granted my experience is limited). Has anyone else had this experience? Does anyone have advice on this issue?
Many thanks,
Andrew.
Link to the good. This is the animated gif file. It may not work in all browsers (I did test the file thoroughly, but the weird issue just seems completely sporadic), but renders correctly in latest Firefox for Mac OS 10.7x.
Link to the bad. The third state is see-through, the background layer is not rendering.
Turn Off the Alpha Transparency in the optimization panel. After carefully examining each state, I realized that I had Alpha Transparency turned ON in the export. Even though each state had a solid red back ground, and even though the other states correctly rendered the solid red background, the Alpha Transparency was messing up the last state of the animation. To correct it, I simply turned OFF the Alpha Transparency. I don't know why I didn't think about that as the solution before. I hope this answer helps someone!
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: