Importing Full Width Image Shapes from Illustrator into Rise

Sep 19, 2022


I'm working in Rise and wanted to import a full width image (just a simple triangle) created in either Illustrator or Photoshop. My issue is that no matter what I seem to do, there isn't a clean line on the image. It looks a little blurry/pixelated and therefore doesn't look super clean when set against a block with the same colored background in Rise. Has anyone else had this issue? Or know of a way to fix it? I've tried using a larger artboard then cropping down. I've tried saving as _NOPROCESS_. I've tried making my own shape and using pre-existing ones. I've tried using lines, and even those get blurry. I've attached a screenshot as an example of what I'm running into. Thank you!

14 Replies
Molly Somerville

Thanks, Tom! I hadn't thought of utilizing PPT. The same thing happens, and I see a little bit of the blur in your triangle, too. So maybe it's just the way it is. Just seems odd to me that you can't create a clean, diagonal line. Or, more probable, I don't know how to do it. Attached is a screenshot of the .svg triangle I created in PPT placed in Rise. 

Tom Kuhlmann

I don't see anything but a nice crisp line. That artifact you show in the screenshot is not consistent with how a vector image should display. Vectors are drawn by the browser and don't have pixels so it will be a straight line.

I did find this info below on a site explaining SVG. Perhaps the resolution of your monitor is what is causing the aliasing. I did load the demo course on a smaller resolution screen and scaled it down and did see a little artifacting. So it appears that lower resolution monitors will experience some artifacts, but there's really nothing you can do about that. 

"Your computer screen is made of fixed-size pixels. A diagonal line can look jagged as the computer translates it to the nearest pixel blocks; this is known as aliasing. Alternatively, the computer can use anti-aliasing to soften the edges, blurring the line across all pixels it partially overlaps.

Most SVG viewers use anti-aliasing by default, and this can sometimes make a 1-pixel black line look like a 2-pixel gray line, because it is centered on the space between two pixels."