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!
I created a triangle in PowerPoint and saved it as .svg. This is what it looks like. SVG is vector so the lines should remain crisp. If you use a bitmap image, I suspect it's possibly compressing depending on the original image size and then the display image size for the browser.
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.
I don't see a blur on mine. It's crisp regardless of whether I zoom in or not. Attached is the shape I created and saved as .svg. Can you insert that and see what it looks like?
Which browser are you using? The .svg is a vector image so it's not based on pixels and should remain crisp.
My resolution is 1080. I also viewed it on a 1440 screen and could see it. I guess what I'm seeing is that you can tell the difference between the clean line of the Rise block and the not as crisp line of the triangle. But maybe it's just my eyes.
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."
Thanks, Tom! This was exactly the information I was looking for. The first image I sent was a .png and not an .svg. So now I know to use the .svg format. Always learning something!
14 Replies
Can you share the image you insert?
I created a triangle in PowerPoint and saved it as .svg. This is what it looks like. SVG is vector so the lines should remain crisp. If you use a bitmap image, I suspect it's possibly compressing depending on the original image size and then the display image size for the browser.
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.
I don't see a blur on mine. It's crisp regardless of whether I zoom in or not. Attached is the shape I created and saved as .svg. Can you insert that and see what it looks like?
Which browser are you using? The .svg is a vector image so it's not based on pixels and should remain crisp.
Maybe it's my own monitor! Wouldn't that be a big run around (gotta love technology!).
I'm using Chrome. Here is a link to a test Rise course. The first triangle is yours. The second is mine.
I think you're sending the preview link and not the share link
Whoops! Here's the correct link.
And perhaps I'm just being way too picky about it! :)
These both look fine to me. I don't get any of the artifacts regardless of the zooming.
https://a.cl.ly/2Nu704vq
https://a.cl.ly/6quGxyzw
I am not sure why you're seeing them, but it's working the way it should.
Thank you for testing these, Tom! I appreciate your help and your tips. I'm glad to know it's working.
I looked also and I don't see any artifacts or pixelating. What is your screen resolution on your monitor set too?
My resolution is 1080. I also viewed it on a 1440 screen and could see it. I guess what I'm seeing is that you can tell the difference between the clean line of the Rise block and the not as crisp line of the triangle. But maybe it's just my eyes.
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."
Thanks, Tom! This was exactly the information I was looking for. The first image I sent was a .png and not an .svg. So now I know to use the .svg format. Always learning something!