IPhone SVG

Developer
Chris Wright
Size
3,490 Kb
Views
34,408
  1. IPhone SVG Previews
  2. IPhone SVG HTML Codes
  3. IPhone SVG CSS Codes

How do I make an iphone svg?

Vector iPhone done in SVG, replacing a transparent PNG that was massive. This one clocked in at around 10kb and actually looks better than the PNG it replaced.. What is a iphone svg? How do you make a iphone svg? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

IPhone SVG Previews
IQ Test

IPhone SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iPhone SVG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body> <div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280px" height="560px" viewBox="0 0 280 560" enable-background="new 0 0 280 560" xml:space="preserve">
<g id="Metal_buttons">	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,129.455c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-15c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V129.455z"/>	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,177.08c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-15c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V177.08z"/>	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,86.705c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-22c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V86.705z"/>	<rect x="189.367" y="0.58" fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" width="43.667" height="2.331"/>
</g>
<g id="Shadows_on_metal_buttons">	<rect x="1.2" y="122.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="1.2" y="79.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="1.2" y="170.969" fill="#6D6D6D" width="5.666" height="4.223"/>
</g>
<g id="Metal_body">	<path fill="#D8D8D8" stroke="#A8A8A8" stroke-miterlimit="10" d="M278.034,504.08c0,22.092-17.908,40-40,40h-194	c-22.091,0-40-17.908-40-40v-461c0-22.092,17.909-40,40-40h194c22.092,0,40,17.908,40,40V504.08z" />
</g>
<g id="Shadows_on_metal_body">	<rect x="3.2" y="482.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="273.2" y="482.969" fill="#6D6D6D" width="5.666" height="4.223"/>
</g>
<g id="Black_phone">	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="141.0942" y1="540.5801" x2="141.0942" y2="6.4111">	<stop offset="0" style="stop-color:#282828"/>	<stop offset="0.0097" style="stop-color:#262626"/>	<stop offset="0.1219" style="stop-color:#161515"/>	<stop offset="0.2609" style="stop-color:#0A0A0A"/>	<stop offset="0.4566" style="stop-color:#040303"/>	<stop offset="1" style="stop-color:#020101"/>	</linearGradient>	<path fill="url(#SVGID_1_)" stroke="#282828" stroke-width="2" stroke-miterlimit="10" d="M275.488,500.58	c0,22.092-17.908,40-40,40H46.7c-22.092,0-40-17.908-40-40V46.411c0-22.092,17.908-40,40-40h188.788c22.092,0,40,17.908,40,40	V500.58z"/>
</g>
<g id="Circle_Button_x2C__speaker">	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="141.2822" y1="520.5791" x2="141.2822" y2="468.7461">	<stop offset="0" style="stop-color:#575858"/>	<stop offset="1" style="stop-color:#282828"/>	</linearGradient>	<circle opacity="0.4" fill="url(#SVGID_2_)" stroke="#444444" stroke-miterlimit="10" cx="141.282" cy="494.662" r="25.917"/>	<path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M149.699,499.339c0,2.065-1.675,3.74-3.741,3.74h-9.352	c-2.066,0-3.741-1.675-3.741-3.74v-9.353c0-2.065,1.675-3.74,3.741-3.74h9.352c2.066,0,3.741,1.675,3.741,3.74V499.339z"/>	<path fill="#111111" d="M169.867,49.497c0,3.452-2.486,6.25-5.554,6.25h-40.726c-3.067,0-5.554-2.798-5.554-6.25l0,0	c0-3.452,2.487-6.25,5.554-6.25h40.726C167.381,43.247,169.867,46.045,169.867,49.497L169.867,49.497z"/>	<circle display="none" fill="#2D2D2D" cx="96.033" cy="64.164" r="6.083"/>
</g>
<g id="Camera">	<circle fill="#4F14A6" stroke="#353535" stroke-miterlimit="10" cx="96.033" cy="49.497" r="3.5"/>	<ellipse cx="96.033" cy="49.663" rx="1.125" ry="1"/>
</g>
<g id="Speaker_inset">	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="143.8101" y1="53.5381" x2="143.8101" y2="45.834">	<stop offset="0" style="stop-color:#575858"/>	<stop offset="1" style="stop-color:#282828"/>	</linearGradient>	<path fill="url(#SVGID_3_)" d="M167.42,49.686c0,2.127-1.725,3.852-3.852,3.852h-39.516c-2.127,0-3.852-1.725-3.852-3.852l0,0	c0-2.127,1.725-3.852,3.852-3.852h39.516C165.695,45.834,167.42,47.559,167.42,49.686L167.42,49.686z"/>
</g>
<g id="Screen">	<rect x="23.034" y="93.414" fill="#666666" stroke="#515151" stroke-miterlimit="10" width="236" height="353.333"/>
</g>
<g id="Button_shadow">	<g>	<defs>	<path id="SVGID_4_" d="M166.782,494.501c0,14.403-11.678,26.078-26.083,26.078c-14.406,0-26.084-11.675-26.084-26.078	c0-14.408,11.679-26.087,26.084-26.087C155.104,468.414,166.782,480.093,166.782,494.501z"/>	</defs>	<clipPath id="SVGID_5_">	<use xlink:href="#SVGID_4_" overflow="visible"/>	</clipPath>	<circle opacity="0.5" clip-path="url(#SVGID_5_)" cx="141.282" cy="452.747" r="42"/>	</g>	<g id="Layer_11">	</g>
</g>
<g id="Grill">	<ellipse fill="#2E2E2F" cx="124.54" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="124.558" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="127.215" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="127.232" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="129.889" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="129.906" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="132.563" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="132.58" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="135.237" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="135.254" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="137.91" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="137.928" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="140.585" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="140.603" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="143.259" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="143.276" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="145.933" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="145.95" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="148.606" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="148.624" cy="48.784" rx="0.736" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="151.281" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="151.298" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="153.954" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="153.972" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="156.629" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="156.646" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="159.302" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="159.32" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="161.977" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="161.994" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="123.146" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="123.163" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="125.819" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="125.837" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="128.494" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="128.511" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="131.167" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="131.185" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="133.841" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="133.859" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="136.515" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="136.533" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="139.189" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="139.207" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="141.864" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="141.881" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="144.538" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="144.556" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="147.211" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="147.229" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="149.885" cy="50.451" rx="0.806" ry="0.682"/>	<ellipse fill="#090405" cx="149.903" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="152.56" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="152.577" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="155.233" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="155.251" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="157.907" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="157.925" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="160.581" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="160.599" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="163.255" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="163.273" cy="50.48" rx="0.737" ry="0.624"/>
</g>
</svg> </div> </body>
</html>
</body>
</html>

IPhone SVG - Script Codes CSS Codes

html { height:100%;
}
body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed;
background-image: linear-gradient(#8b9da9, #fff6e4);
}
div { padding:4em 0 0 0; width:280px; margin:0 auto;
}
IPhone SVG - Script Codes
IPhone SVG - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3.5
Size 3,490 Kb
Views 34,408
Do you need developer help for IPhone SVG?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Wright (chriswrightdesign) Script Codes
Name
Inverted shadow with fade
Macbook Air SVG
Grid - two columns with gutters
CSS line-height animated accordion pattern
Grid - More complex grids with span
Background Noisy Radial Gradient
Bouncing ball arc horizontal
CSS Responsive animated Accordion
Reverse cascade
Form adaptation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!