KFox Portfolio - HTML & CSS

Skip to main content

Scalable Vector Graphics (SVG's)

SVG's are an XML-based format used to create 2D graphics. Rather than storing a set of pixels and colors like a regular picture, they use vector graphic shapes, bitmap images, and text to store the paths and outlines that create a graphic. This means that an SVG image can be resized, moved, and animated without losing quality or "looking pixelated." Below, I used two different methods to add SVG's to this page.

Embedded with <img> element

a drawing of young man using a tablet

Fermentum dui faucibus in ornare quam. Tellus id interdum velit laoreet id donec ultrices. Convallis posuere morbi leo urna molestie. Ut morbi tincidunt augue interdum velit. Tellus mauris a diam maecenas sed enim ut. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed vulputate mi sit amet mauris. In fermentum posuere urna nec tincidunt. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium.

Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Ut tellus elementum sagittis vitae et leo duis. Odio morbi quis commodo odio aenean sed adipiscing diam. Elit duis tristique sollicitudin nibh. Facilisis gravida neque convallis a cras semper auctor. Suspendisse sed nisi lacus sed viverra. At consectetur lorem donec massa sapien faucibus et. Dictum at tempor commodo ullamcorper a. Quam elementum pulvinar etiam non quam lacus suspendisse. Imperdiet sed euismod nisi porta lorem. Dictum sit amet justo donec enim. Blandit aliquam etiam erat velit scelerisque in. Accumsan in nisl nisi scelerisque. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a.

Inline SVG's

Curabitur gravida arcu ac tortor dignissim. Egestas tellus rutrum tellus pellentesque. Tincidunt augue interdum velit euismod in. Sed enim ut sem viverra aliquet eget. Enim diam vulputate ut pharetra. Sit amet tellus cras adipiscing. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Turpis egestas integer eget aliquet nibh praesent tristique. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Lobortis mattis aliquam faucibus purus. Eget sit amet tellus cras. Vel pharetra vel turpis nunc eget lorem. Eu turpis egestas pretium aenean pharetra magna ac. Quis blandit turpis cursus in hac habitasse platea dictumst. Ante in nibh mauris cursus mattis molestie. Sed enim ut sem viverra aliquet eget. Sollicitudin aliquam ultrices sagittis orci. Lacinia at quis risus sed. A iaculis at erat pellentesque adipiscing commodo elit.

Non odio euismod lacinia at quis risus sed vulputate odio. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Ullamcorper eget nulla facilisi etiam. Blandit turpis cursus in hac habitasse platea dictumst. A condimentum vitae sapien pellentesque habitant morbi tristique. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Auctor neque vitae tempus quam pellentesque nec. Eget lorem dolor sed viverra ipsum. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Eu nisl nunc mi ipsum faucibus. Duis at consectetur lorem donec massa sapien faucibus.

Vitae purus faucibus ornare suspendisse. Pretium lectus quam id leo in vitae turpis massa. Et malesuada fames ac turpis. Blandit massa enim nec dui. A iaculis at erat pellentesque adipiscing commodo elit. Nec feugiat in fermentum posuere. Diam maecenas ultricies mi eget mauris. Sed sed risus pretium quam vulputate dignissim. Quam adipiscing vitae proin sagittis nisl rhoncus. Nec ultrices dui sapien eget mi proin. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Vestibulum sed arcu non odio euismod.