TECHNICAL VOCATIONAL LIVELIH

TVL-ICT-PROGRAMMING
(.NET TECHNOLOGY) NC III
Quarter 3
Week 1

CapSLET
Capsulized
Self - Learning
Empowerment
Toolkit

Schools Division Office of Zamboanga City

Region IX, Zamboanga Peninsula
Zamboanga City
 CapSLET
Capsulized Self - Learning Empowerment Toolkit

TVL – ICT-PROGRAMMING
SUBJECT &
GRADE/LEVEL
(.NET TECHNOLOGY) QUARTER 3 WEEK 1
GRADE 11
PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
TOPIC
(PPHJC)
CODE
LEARNING
Use CSS3 to create scalable graphics
COMPETENCY
and animated user interface TLE_ICTP.NET
11-12PPHJC-
IVd-h-33
1. Define Scalable Vector Graphics
LEARNING 2. Describe the tag syntax in using Scalable Vector Graphics.
OBJECTIVES 3. Give the meaning and importance of SVG in dealing with graphics.

IMPORTANT: Do not write anything on this material. Write your answers on the learner’s activity and
assessment sheets provided separately.

UNDERSTAND
HTML SVG Graphics

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and
graphical applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y
coordinate system etc.

Viewing SVG Files

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet
Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

Embedding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>...</svg> tag which has following simple syntax

<svg xmlns = "http://www.w3.org/2000/svg">

...
</svg>

HTML5 − SVG Circle

Following is the HTML5 version of an SVG example which would draw a circle using <circle> tag –

2|Page
HTML5 − SVG Rectangle
Following is the HTML5 version of an SVG example which would draw a rectangle using <rect> tag −

3|Page
Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can
attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed,
4|Page
the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser.
If its position should be changed, the entire scene needs to be redrawn, including any objects that
might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas SVG

 Resolution dependent  Resolution independent

 No support for event handlers
 Poor text rendering capabilities
 You can save the resulting image as
.png or .jpg
 Well suited for graphic-intensive games
 Support for event handlers
 Best suited for applications with large rendering
areas (Google Maps)
 Slow rendering if complex (anything
that uses the DOM a lot will be slow)

 Not suited for game applications

SAQ-1: What is the differences between SVG and Canvas ?

SAQ-2 : What is the tag in using Scalable Vector Graphics ?

Let’s Practice!

(Answer on the Answer Sheet provided for Activity and Assessment.)

Directions: Multiple Choice: Choose the letter of the correct answer from the given choices.
1. HTML5 SVG stands for?
a. SVG stands for Scalable Vector Graphics c. SVG stands for Scalable Variable Graphics
b. SVG stands for Script Vector Graphics d. None of the Above
2. In HTML5 SVG is used to?
a. Define Images for the Web c. Define Path & Color for the Web
b. Define graphics for the Web d. None of the Above
3. In HTML5 which one is the right tag of SVG Circle ?
a. < circle cx="50" cy="50" rx="40" ry="40" fill="yellow" / >
b. < circle cx="50" cy="50" r="40" fill="yellow" / >
c. < circle x="50" y="50" r="40" fill="yellow" / >
d. None of the Above
4. In HTML5 which one is the right tag of SVG Rectangle ?
a. < rect cx="0" cy="0" width="400" height="100" style="fill:red" / >
b. < rect x1="0" y1="0" width="400" height="100" style="fill:red" / >
c. < rect x="0" y="0" width="400" height="100" style="fill:red" / >
d. None of the Above
5. In HTML5 which one is the right tag of SVG Ellipse ?

5|Page
 a. < ellipse x="100" y="100" rx="15" ry="35" fill="blue"/ >
b. < ellipse cx="100" cy="100" r="15" fill="blue"/ >
c. < ellipse cx="100" cy="100" rx="15" ry="35" fill="blue"/ >
d. None of the Above

REMEMBER
Key Points

What is SVG?

 SVG stands for Scalable Vector Graphics

 SVG is used to define vector-based graphics for the Web
 SVG defines the graphics in XML format
 Every element and every attribute in SVG files can be animated
 SVG is a W3C recommendation
 SVG integrates with other W3C standards such as the DOM and XSL

SVG is a W3C Recommendation

SVG 1.0 became a W3C Recommendation on 4 September 2001.

SVG 1.1 became a W3C Recommendation on 14 January 2003.

SVG 1.1 (Second Edition) became a W3C Recommendation on 16 August 2011.

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

 SVG images can be created and edited with any text editor
 SVG images can be searched, indexed, scripted, and compressed
 SVG images are scalable
 SVG images can be printed with high quality at any resolution
 SVG images are zoomable
 SVG graphics do NOT lose any quality if they are zoomed or resized
 SVG is an open standard
 SVG files are pure XML

Creating SVG Images

SVG images can be created with any text editor, but it is often more convenient to create SVG
images with a drawing program, like Inkscape.

6|Page
 TRY
Directions: Open Notepad++ and predict the output of the following tags.

<!DOCTYPE html>

<html>
<head>

<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>

<body>
<h2 align = "center">HTML5 SVG Polyline</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
</svg>
</body>
</html>

Source: www.w3schools.com.”HTML SVG Graphics”

Accessed December 27,2020.
REFERENCES https://www.w3schools.com/graphics/svg_intro.asp

This learning resource contains copyrighted materials. The use of which has not
been specifically authorized by the copyright owner. We are making this learning
resource in our efforts to provide printed and e-copy learning resources available
for the learners in reference to the learning continuity plan of this division in this
time of pandemic.
DISCLAIMER
This LR is produced and distributed locally without profit and will be used for
educational purposes only. No malicious infringement is intended by the writer.
Credits and respect to the original creator/owner of the materials found in this
learning resource.

Developed by:

7|Page
 JOHNNY JEAN N. TIGAS
TEACHER-III
ZAMBOANGA CITY HIGH SCHOOL
Integrated Senior High School

Topic: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 (PPHJC)

Learning Competency: Use CSS3 to create scalable graphics and animated user interface
ANSWER KEY
SAQ 1. Answer may vary

SAQ2. <svg>...</svg> 

Let’s Practice
1. A
2. B
3. B
4. A
5. C

TRY

8|Page
 Republic of the Philippines
Department of Education
Division of Zamboanga City

EVALUATION TOOL FOR CONTENT AND LAYOUT & DESIGN

CAPSULIZED SELF-LEARNING EMPOWERMENT TOOLKIT (CapSLET)

Learning Area: __________________________________ Grade Level: ____________

Title: ___________________________________________________________________
Quarter: _________________________________________________________________
Week: ___________________________________________________________________
Learning Competency: _________________________________________________________

Instructions:

1. Read carefully the learning resource (LR) page by page to evaluate the LR for compliance to standards
indicated in the criterion items under each factor below.
2. Put a check mark (/) in the appropriate column beside each criterion item. If your answer is NO, cite
specific page/s, briefly indicate the errors found, and give your recommendations in the attached
Summary of Findings form.
3. Write Not Applicable (NA) for criterion items that does not apply in the LR evaluated.

Note:
This tool is anchored on the Guidelines in ADM Content Evaluation, Guidelines in ADM
Layout Evaluation and Level 2 DepEd Evaluation Rating Sheet for 2 DepEd Evaluation Rating
Sheet for Story Books and Big Books.
.

Summary of Content Findings, Corrections and Review for Locally Developed

CapSLET

Title of the CapSLET: ____________________ Grade Level: ______

Quarter: ___________________________
Week: _____________________________
Part of Brief Specific Put a check mark
the descripti recommend
CapSLE on of ations for
T/ Errors/ improving
Paragra Findings the
ph / Line / identified
/ Page Observa criterion Not
number tions Impleme
Impleme
(in nted
nted
chronolo
gical
order)

9|Page
 Legend: (Type of Error) C - Content, L – Language, DL – Design and Layout

Other Findings: Write additional comments and recommendations not captured

in the evaluation tools used.
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________
Prepared by: Date accomplished:
_________________________ _____________________
(Signature Over Printed Name)

10 | P a g e